vue中使用betterscroll无法滚动怎么办
这篇文章将为大家详细讲解有关vue中使用better scroll无法滚动怎么办,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
创新互联服务项目包括桦南网站建设、桦南网站制作、桦南网页制作以及桦南网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,桦南网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到桦南省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!
使用vue+better scroll
今天实现切换用户后查询用户订单列表的一个功能,在实例化betterscroll时,因为有的用户没有订单,切换用户后会出现订单列表无法滚动的问题。先放代码:
0">
订单信息最近没有订单
// init better scroll initScroll() { let self = this; if (!this.scroll) { this.scroll = new BScroll(self.$refs.scrollWrap, { bounceTime: 200, click: true, mouseWheel: true, scrollbar: { // 滚动条 fade: true, }, pullUpLoad: { // 上拉加载 threshold: -40, } }) } else { this.scroll.refresh(); } this.scroll.on('pullingUp', () => { if(this.orderLists.length%10 == 0) { // 判断是否还有订单,但没有考虑用户有10的整倍数条订单的情况 this.orderSize += 10; this.resentOrders(); return; } else { Toast("没有更多了") } }) },
找了半天原因,最后发现应该这样:
0">
订单信息最近没有订单
把v-if、v-else换成 v-show就好啦
ps:
1. 检查HTML 以及css是否有写错的地方,有时候写错会导致html中dom无法正确生成,而better-scroll是需要dom完全加载完毕后才可以正确滚动的
2. html和css全部写正确的时候还是无法滚动
检查better-scroll是否初始化时机太早(dom没有完全生成,已经初始化了),可以使用vue的$nextTick来异步初始化better-scroll
3. better-scroll在使用的时候,滚动只作用于第一层元素,因此在使用better-scroll时,better要加上一层div(div下面再放其他东西,better里不能有同级的2及以上div)
这里要加上seller-content层,如果不加是无法滚动的
关于“vue中使用better scroll无法滚动怎么办”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
分享名称:vue中使用betterscroll无法滚动怎么办
网页地址:http://azwzsj.com/article/pjjhcc.html