美文网首页
vue 2.X 结合better-scroll实现滚动效果

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

作者: 第八共同体 | 来源:发表于2017-11-13 17:03 被阅读0次

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

    <div class="foods-wrapper" ref="foodsWrapper">
          <ul>
            <li v-for="item in goods" class="food-list food-list-hook">
              <h1 class="title">{{item.name}}</h1>
              <ul>
                <li v-for="food in item.foods" class="food-item border-1px">
                  <div class="icon">
                    <img width="57" :src="food.icon">
                  </div>
                  <div class="content">
                    <h2 class="name">{{food.name}}</h2>
                    <p class="desc">{{food.description}}</p>
                    <div class="extra">
                      <span class="count">月售{{food.sellCount}}</span>
                      <span>好评率{{food.rating}}%</span>
                    </div>
                    <div class="price">
                      <span class="now">¥{{food.price}}</span>
                      <span v-show="food.oldPrice" class="old">¥{{food.oldPrice}}</span>
                    </div>
                  </div>
                </li>
              </ul>
            </li>
          </ul>
        </div>
    

    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()
              })
            }
          })
        },
    

    相关文章

      网友评论

          本文标题:vue 2.X 结合better-scroll实现滚动效果

          本文链接:https://www.haomeiwen.com/subject/laizmxtx.html