</Col>
<Col :span="2" v-else>
<Spin size="large"></Spin>
</Col>
</Row>
</li>
</ul>
</div>
mounted() {
// 设置wrapper的高度
this.$refs.wrapper.style.height = document.getElementById("app").offsetHeight - document.getElementById("scroll").offsetTop + "px";
// better-scroll 的content高度不大于wrapper高度就不能滚动,这里的问题是,当一页数据的高度不够srapper的高度的时候,即使存在n页也不能下拉
// 需要设置content的min-height大于wrapper高度
this.$refs.content.style.minHeight = this.$refs.wrapper.offsetHeight + 1 + "px";
this._initScroll();
this.getIncomeDetail(this.nextPage);
// 设置scroll的高度
// this.scrollHeight = document.getElementById("app").offsetHeight - document.getElementById("scroll").offsetTop ;
},
methods:{
_initScroll() {
this.orderScroll = new BScroll(this.$refs.wrapper, {
probeType: 3,
click:true,
pullUpLoad: { // 配置上啦加载
threshold: -80 //上拉80px的时候加载
},
mouseWheel: { // pc端同样能滑动
speed: 20,
invert: false
},
useTransition:false, // 防止iphone微信滑动卡顿
});
// 上拉加载数据
this.orderScroll.on('pullingUp',()=>{
this.scrollFinish = false;
// 防止一次上拉触发两次事件,不要在ajax的请求数据完成事件中调用下面的finish方法,否则有可能一次上拉触发两次上拉事件
this.orderScroll.finishPullUp();
// 加载数据
this.getIncomeDetail(this.nextPage);
});
}
总结
以上所述是小编给大家介绍的vue-better-scroll 的使用实例代码详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
