这两个插件我用过好几次，有时候很顺利，不顺利的时候真的很麻烦，一直无法滚动，明明style里已经有样式了，就是滚动不了。

先说下在vue里的三种的引入方式：

1. 在index.html文件里通过script的方式引入进来，let iscroll = new IScroll(‘.wrapper’,{click:true}
   <script type="text/javascript" src="src/assets/js/iscroll.js"></script>
2. 使用import引入，let BScroll= new BScroll(‘.wrapper’,{click:true}

import BScroll from 'better-scroll'

1. 在main.js将bettre-scroll引入进来，然后Vue.prototype.$BScroll = BScroll, 然后在使用的地方，let BScroll= new this.$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"> //循环的列表</div></div></div></mast>

重点css，需要滚动的容器不能设置高度，如下.mast-specificat-list这个滚动容器不要设置高度，我是设置高度后一直不能滚动，另外滚动的容器的子元素如果有浮动，父元素一定要清除浮动，另外当左右两边都有滚动的时候，不能用浮动，需要用绝对定位，否则滚动会导致布局乱了：

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

因为html比较多，看着比较乱，html只需看css这两个类，符合官网的html结构即可

如果是异步获取数据后，需要在异步成功后进行初始化，例如：

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('没有查询到商品分类');}//拿到数据，并赋值后（需要进行监听数据的变化），进行初始化let categorysscroll = new BScroll('.menu-content-slider',{scrollY: true,click: true});         }, (response) => {mui.toast('网络错误');});}

需要注意下v-if和v-show,如果局部滚动的容器是通过v-if显示的，有可能会出现初始化的时候找不到DOM，使用v-show即可

使用iscroll后，子元素点击事件会触发两次，可以如下解决：

//屏蔽掉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>