使用Vue-scroller頁(yè)面input框不能觸發(fā)滑動(dòng)的問(wèn)題及解決方法
因?yàn)轫?xiàng)目中有個(gè)填寫(xiě)信息的頁(yè)面，有很多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，有知道的可以在評(píng)論區(qū)說(shuō)一下；最后因?yàn)関ue-scroller是npm引入的方式，怕會(huì)被更新掉，所以直接把組件代碼copy出來(lái)放在項(xiàng)目的components目錄下引用了
main.js引入方式和插件類似，使用方式和官方一樣
到此這篇關(guān)于使用Vue-scroller頁(yè)面input框不能觸發(fā)滑動(dòng)的問(wèn)題及解決方法的文章就介紹到這了,更多相關(guān)Vue-scroller頁(yè)面input框不能觸發(fā)滑動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue雙擊事件2.0事件監(jiān)聽(tīng)(點(diǎn)擊-雙擊-鼠標(biāo)事件)和事件修飾符操作
這篇文章主要介紹了vue雙擊事件2.0事件監(jiān)聽(tīng)(點(diǎn)擊-雙擊-鼠標(biāo)事件)和事件修飾符操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
Vue利用Blob下載原生二進(jìn)制數(shù)組文件
這篇文章主要為大家詳細(xì)介紹了Vue利用Blob下載原生二進(jìn)制數(shù)組文件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
基于Vue+Openlayer實(shí)現(xiàn)動(dòng)態(tài)加載geojson的方法
本文通過(guò)實(shí)例代碼給大家介紹基于Vue+Openlayer實(shí)現(xiàn)動(dòng)態(tài)加載geojson的方法，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-09-09
vue3項(xiàng)目使用pinia狀態(tài)管理器的使用
Pinia是一個(gè)專為Vue3設(shè)計(jì)的現(xiàn)代化狀態(tài)管理庫(kù),本文主要介紹了vue3項(xiàng)目使用pinia狀態(tài)管理器的使用,具有一定的參考價(jià)值,感興趣的可以了解一下2024-05-05
Vue高級(jí)用法實(shí)例教程之動(dòng)態(tài)組件
讓多個(gè)組件使用同一個(gè)掛載點(diǎn),并動(dòng)態(tài)切換,這就是動(dòng)態(tài)組件,下面這篇文章主要給大家介紹了關(guān)于Vue高級(jí)用法實(shí)例教程之動(dòng)態(tài)組件的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-11-11
解決vue路由name同名,路由重復(fù)的問(wèn)題
這篇文章主要介紹了解決vue路由name同名,路由重復(fù)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
這篇文章主要為大家介紹了OpenDataV低代碼平臺(tái)新增組件流程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
從零開(kāi)始搭建vue移動(dòng)端項(xiàng)目到上線的步驟
這篇文章主要介紹了從零開(kāi)始搭建vue移動(dòng)端項(xiàng)目到上線的步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
vue使用wavesurfer.js解決音頻可視化播放問(wèn)題
Wavesurfer.js是一款基于HTML5?canvas和Web?Audio的聲紋可視化插件，功能十分強(qiáng)大，在Vue框架中嵌入使用該插件，今天重點(diǎn)給大家介紹下vue使用wavesurfer.js解決音頻可視化播放問(wèn)題，感興趣的朋友一起看看吧2022-04-04
今天小編就為大家分享一篇關(guān)于詳解vue-router導(dǎo)航守衛(wèi)，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01