饿了么Vue2.0与better-scroll结合的使用

首先安装better-scroll

npm i better-scroll -S

goods页面模板

<template>
<div class="goods">
<div class="menu-wrapper" ref="menuWrapper">
<ul>
<li v-for="item in goods" class="menu-item">
<span class="text  border-1px">
<span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>{{item.name}}

</span>

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

</li>
</ul>
</li>
</ul>

</div>
</div>
</template>

js

<script type="text/ecmascript-6">
/* eslint-disable*/
import axios from 'axios'
import BScroll from 'better-scroll'
export default{

props:{
seller:{
type:Object
}
},
data(){
return{
goods:[]
}
},
created(){
this.classMap=['decrease', 'discount', 'special', 'invoice', 'guarantee']
axios.get('/api/goods').then((res)=>{
this.goods=res.data.data;
this.$nextTick(()=>{
this._initScroll();
})
console.log(this.$refs.menuWrapper)

})

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

}
}
</script>

better-scroll用法

我们先来看一下 better-scroll 常见的 html 结构：

<div class="wrapper">
<ul cl
b3b1
ass="content">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

当 content 的高度不超过父容器的高度，是不能滚动的，而它一旦超过了父容器的高度，我们就可以滚动内容区了，这就是 better-scroll 的滚动原理。

import BScroll from 'better-scroll'
let wrapper = document.querySelector('.wrapper')
let scroll = new BScroll(wrapper, {})

better-scroll 对外暴露了一个 BScroll 的类，我们初始化只需要 new 一个类的实例即可。第一个参数就是我们 wrapper 的 DOM 对象，第二个是一些配置参数。

better-scroll 的初始化时机很重要，因为它在初始化的时候，会计算父元素和子元素的高度和宽度，来决定是否可以纵向和横向滚动。因此，我们在初始化它的时候，必须确保父元素和子元素的内容已经正确渲染了。如果没有办法滑动，那就是初始化的时机不对。

饿了么是这样处理的：

mounted() {
this.$nextTick(() => {
this.scroll = new Bscroll(this.$refs.wrapper, {}) })
}

this.$nextTick()

这个方法作用是当数据被修改后使用这个方法会回调获取更新后的dom再render出来

如果不在下面的

this.$nextTick()

方法里回调这个方法，数据改变后再来计算滚动轴就会出错