這兩個插件我用過好幾次，有時候很順利，不順利的時候真的很麻煩，一直無法滾動，明明style里已經(jīng)有樣式了，就是滾動不了。

先說下在vue里的三種的引入方式：

在index.html文件里通過script的方式引入進來，let iscroll = new IScroll(‘.wrapper’,{click:true}
<script type="text/javascript" src="src/assets/js/iscroll.js"></script>

使用import引入，let BScroll= new BScroll(‘.wrapper’,{click:true}

import BScroll from 'better-scroll'

在main.js將bettre-scroll引入進來，然后Vue.prototype.BScroll=BScroll,然后在使用的地方，letBScroll=newthis.BScroll=BScroll,然后在使用的地方，letBScroll=newthis.BScroll(‘.wrapper’,{click:true});
這種比較方便就是只需在main.js里import一次，如果是第二種的話，需要在使用的每個組件都import一次

html：

<mast v-show="mastspecificat" :class="{'network':mastspecificat}" @touchmove.prevent><div class="mast-specificat-list-scroll mast-scrollspecificat"><div class="mast-specificat-list" :class="{'mast-specificat-list-height':mastspecificat}"><div class="mast-specificat-product" v-if="specifications.active === 't' ? true : false" v-for="(specifications,index) in product.specs"> //循環(huán)的列表</div></div></div></mast>

重點css，需要滾動的容器不能設(shè)置高度，如下.mast-specificat-list這個滾動容器不要設(shè)置高度，我是設(shè)置高度后一直不能滾動，另外滾動的容器的子元素如果有浮動，父元素一定要清除浮動，另外當(dāng)左右兩邊都有滾動的時候，不能用浮動，需要用絕對定位，否則滾動會導(dǎo)致布局亂了：

.mast-specificat-list-scroll{height: 150px;overflow: hidden;}.mast-specificat-list{/*height: 210px;*//*overflow: auto;*/-webkit-overflow-scrolling:touch;}

因為html比較多，看著比較亂，html只需看css這兩個類，符合官網(wǎng)的html結(jié)構(gòu)即可

如果是異步獲取數(shù)據(jù)后，需要在異步成功后進行初始化，例如：

show_category: function () {this.API.show_category().then((response) => {this.categorys = response;if(response.length > 0){this.get_product(response[0]['display_name'],response[0]['id']);}else{this.$store.state.mastloadding = false;mui.toast('沒有查詢到商品分類');}//拿到數(shù)據(jù)，并賦值后（需要進行監(jiān)聽數(shù)據(jù)的變化），進行初始化let categorysscroll = new BScroll('.menu-content-slider',{scrollY: true,click: true}); }, (response) => {mui.toast('網(wǎng)絡(luò)錯誤');});}

需要注意下v-if和v-show,如果局部滾動的容器是通過v-if顯示的，有可能會出現(xiàn)初始化的時候找不到DOM，使用v-show即可

使用iscroll后，子元素點擊事件會觸發(fā)兩次，可以如下解決：

//屏蔽掉click事件，自定義tap事件 let menuscroll = new BScroll('.mast-cart-content-parent',{scrollY: true,// click: truetap:"set_cart,changeMastDisplay" }); <span class="confirm-product-price" @tap="changeMastDisplay({'name':'mastflavour','product':product})"></span> <span class="menu-product-reduce" @tap="set_cart(product,{handle:1})"></span>

總結(jié)

以上是生活随笔為你收集整理的解决vue里iscroll（better-scroll）点击触发两次和初始化无法滚动问题！的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。