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

  • 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){
										//在此请求数据
									}
							})
					}
			}
	}

猜你喜欢

转载自blog.csdn.net/qq_43201542/article/details/87967044