使用Vue-scroller頁面input框不能觸發(fā)滑動(dòng)的問題及解決方法
更新時(shí)間：2020年08月08日 09:42:48 作者：Brother斌
這篇文章主要介紹了使用Vue-scroller頁面input框不能觸發(fā)滑動(dòng)的問題,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
因?yàn)轫?xiàng)目中有個(gè)填寫信息的頁面，有很多input框，引入vue-scroller后發(fā)現(xiàn)在input區(qū)域滑動(dòng)失效；看了一下引入的vue-scroller組件里的源碼，發(fā)現(xiàn)在組件源碼里的Scroller.vue中在touchStart、touchMove和mouseDownd方法的時(shí)候被return了
touchStart(e) {
// Don't react if initial down happens on a form element
//注釋掉這段代碼就行
// if (e.target.tagName.match(/input|textarea|select/i)) {
// return
// }
//注釋掉這段代碼就行
if (e.target.tagName.match(/textarea|select/i)) {
return;
}
this.scroller.doTouchStart(e.touches, e.timeStamp);
},
touchMove(e) {
//touchMove也要重新加個(gè)判斷，否則input框不能左右滑動(dòng)
if (!e.target.tagName.match(/input/i)) {
e.preventDefault();
}
this.scroller.doTouchMove(e.touches, e.timeStamp);
},
mouseDown(e) {
// Don't react if initial down happens on a form element
//注釋掉這段代碼就行
// if (e.target.tagName.match(/input|textarea|select/i)) {
// return
// }
//注釋掉這段代碼就行
if (e.target.tagName.match(/textarea|select/i)) {
return;
}
this.scroller.doTouchStart(
[
{
pageX: e.pageX,
pageY: e.pageY
}
],
e.timeStamp
);
this.mousedown = true;
},
具體我也不知道阻止滑動(dòng)input框區(qū)域是為了防止什么Bug，有知道的可以在評論區(qū)說一下；最后因?yàn)関ue-scroller是npm引入的方式，怕會被更新掉，所以直接把組件代碼copy出來放在項(xiàng)目的components目錄下引用了
main.js引入方式和插件類似，使用方式和官方一樣
到此這篇關(guān)于使用Vue-scroller頁面input框不能觸發(fā)滑動(dòng)的問題及解決方法的文章就介紹到這了,更多相關(guān)Vue-scroller頁面input框不能觸發(fā)滑動(dòng)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue-element-admin 全局loading加載等待
本文主要介紹了vue-element-admin 全局loading加載等待，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了Vue 打包體積優(yōu)化方案小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架,與其它大型框架不同的是,Vue被設(shè)計(jì)為可以自底向上逐層應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于vue使用csp的相關(guān)資料,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue中倒計(jì)時(shí)組件的實(shí)例代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-07-07
詳解Vue組件之間的數(shù)據(jù)通信實(shí)例
本篇文章主要介紹了詳解Vue組件之間的數(shù)據(jù)通信實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
vue3前端實(shí)現(xiàn)全屏顯示及元素垂直填滿頁面效果
這篇文章主要給大家介紹了關(guān)于vue3前端實(shí)現(xiàn)全屏顯示及元素垂直填滿頁面效果的相關(guān)資料,文中還給大家介紹了vue3實(shí)現(xiàn)某一個(gè)元素全屏之后就黑屏了的解決辦法,需要的朋友可以參考下2024-02-02
本文主要介紹了如何解決el-menu標(biāo)題過長顯示不全問題,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,感興趣的朋友們跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12
今天小編就為大家分享一篇解決vue 表格table列求和的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
defineProps是Vue3中的一種新的組件數(shù)據(jù)傳遞方式,可以用于在子組件中定義接收哪些父組件的props,這篇文章給大家介紹vue3中defineProps及使用方法詳解,感興趣的朋友跟隨小編一起看看吧2024-03-03
vue swipeCell滑動(dòng)單元格(仿微信)的實(shí)現(xiàn)示例
這篇文章主要介紹了vue swipeCell滑動(dòng)單元格(仿微信)的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09