this.meunScroll=new BScroll(this.$refs.menuWrapper,{});
this.foodsScroll=new BScroll(this.$refs.foodsWrapper,{});
}
better-scroll用法
我们先来看一下 better-scroll 常见的 html 结构：
<div class="wrapper">
<ul class="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()方法里回调这个方法，数据改变后再来计算滚动轴就会出错上拉刷新功能
<div class="wrapper" ref="wrapper">
<ul class="content" ref="content">
<li v-for="(item,key) in detail" :key="key" v-if="detail.length > 0">
<Row type="flex" justify="start" align="middle">
<Col :span="8" class="detail-item">
<span :class="{'color-red':item.is_delay === 1}">{{item.order_sn}}</span>
</Col>
<Col :span="8" class="detail-item">
<span>{{item.date}}</span>
</Col>
<Col :span="8" class="detail-item">
<span>￥ {{item.partner_profit | number2}}</span>
</Col>
</Row>
</li>
<li v-if="!scrollFinish">
<Row type="flex" justify="center" align="middle">
<Col :span="6" v-if="loadingText">
<p>{{loadingText}}</p>
