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()
})
}
})
},
网友评论