美文网首页
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