vue 2.X 结合better-scroll实现滚动效果

1. 在模板中对于要滚动的元素添加ref属性

      

        

          
{{item.name}}
          

            

              

                
              
              

                
{{food.name}}
                
{{food.description}}
                

                  月售{{food.sellCount}}
                  好评率{{food.rating}}%
                
                

                  ￥{{food.price}}
                  ￥{{food.oldPrice}}
                
              
            
          
        
      
    

2，在methods属性中实例化better-scroll实例

记得导入better-scroll: import BScroll from 'better-scroll'

methods: {
      _initScroll () {
        this.menuScroll = new BScroll(this.$refs.menuWrapper, {})
        this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {})
      ......
 }

3. 当dom元素渲染完成后，调用函数_initScroll

created () {
      this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']

      this.$http.get('/api/goods').then((responce) => {
        responce = responce.body
        if (responce.errno === ERR_OK) {
          this.goods = responce.data
          this.$nextTick(() => {
            console.log('更新完成')
            this._initScroll()
          })
        }
      })
    },