vue 中的 better-scroll插件---上拉加载 [详解]

最新推荐文章于 2022-09-20 17:50:05 发布

凌晨两点半`

最新推荐文章于 2022-09-20 17:50:05 发布

阅读量505

点赞数

分类专栏： VUE es6

本文链接：https://blog.csdn.net/qq_43201542/article/details/87967044

版权

VUE 同时被 2 个专栏收录

34 篇文章 7 订阅

订阅专栏

es6

10 篇文章 0 订阅

订阅专栏

npm i better-scroll 下载第三方插件
在vue中引用 import BScroll from ‘better-scroll’

import BScroll from 'better-scroll';
export default{
			data(){
						bscroll:null // 方便调用
				},
			mounted(){ // 钩子函数   只调用一次
					this.bscroll=new BScroll('节点',{
								probeType:2   //默认是0  为2时 屏幕滑动的过程中  实时  派发的scroll事件
					});
					this.scrollLoad();
			},
			methods:{
					scrollLoad(){
							let bs=this.bscroll;
							let open=false;		//开关   控制是否请求数据
							bs.on('scroll',()=>{  //滚动事件
								if(bs.y<bs.masScrollY-40){   //判断 滚动的距离
												open=true;
										}else if(bs.y<bs.maxScrollY-20){
												open=false;
										}
							})
							bs.on('scrollEnd',()=>{//滚动结束
											open=false;
								})
							bs.on('touchEnd',()=>{//触摸结束触发
								if(open){
										//在此请求数据
									}
							})
					}
			}
	}