这两个插件我用过好几次，有时候很顺利，不顺利的时候真的很麻烦，一直无法滚动，明明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: true
         tap:"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>