better-scroll实现上下拉加载效果

vue 使用better-scroll实现上下拉加载效果

安装插件
npm install better-scroll --save

页面使用

<script>
	import Bscroll from "better-scroll";
	export default {
	  data() {
		    return {
		    	isPullDown: false,
			      pageNo: 1, //当前页
			      pageSize: 20, //每页显示
			      totalPage: "", //总页数
			      totalNo: "", //总条数
			      options: {
			        click: true,//解决页面点击事件不触发
			        scrollY: true,
			        pullDownRefresh: {
			          threshold: 30, //下拉距离超过30px触发pullingDown事件
			          stop: 20 / 回弹停留在距离顶部20px的位置
			        }
			      }
		    }
	   },
	   created() {
		    this.list();
		  },
	    mounted() {
	    	this.$nextTick(() => {
		      this.initScroll();
		    });
		},
		methods: {
			initScroll() {
		      this.myScroll = new Bscroll(".box",this.options);
		      // this.myScroll = new Bscroll(".mytask_main", { mouseWheel: true, click: true, tap: true });
		      // 上拉加载
		      this.pullDownEvent();
		      // 下拉刷新
		      this.pullUpLoadEvent();
		    },
		    finishPulling() {
		      this.myScroll.finishPullDown(); // 结束下拉刷新
		      this.myScroll.finishPullUp(); // 结束上拉加载更多
		      this.myScroll.refresh(); // dom节点变化，重新计算better-scroll
		    },
		    pullDownEvent() {
		      this.myScroll.on("pullingDown", () => {
		        this.isPullDown = true;
		        console.log("下拉刷新");
		        this.pageNo = 1;
		        this.getList();
		      });
		    },
		    pullUpLoadEvent() {
		      this.myScroll.on("pullingUp", () => {
		        console.log("上拉加载");
		        if (this.pageNo < this.totalPage) {
		          this.pageNo++;
		          this.getList();
		        } else {
		          this.isPullDown = false;
		        }
		      });
		    },
		    getList(){
		   		 let _this=this
		    	let data={
		    	//请求的参数
		    	}
		    	reqUrl(this,data).then(res=>{
		    		_this.pageNo = res.body.pageNo;
            		_this.totalPage = res.body.totalPage;
						if (_this.pageNo != 1) {
			             // 不是第一页，要拼接上一页的数据
			              _this.list = _this.list.concat(res.body.list);
			              if (_this.pageNo != res.body.totalPage) {
			                _this.isPullDown = true;
			              }
			            } else {
			              // 第一页
			              _this.list = res.body.list;
			            }
			            _this.$nextTick(() => {
			              _this.finishPulling();
			            });
		    	}).catch(err=>{
		    		console.log(err)
		    	})
		    }
		}
   }
</script>

最后

以上就是紧张曲奇为你收集整理的better-scroll实现上下拉加载效果的全部内容，希望文章能够帮你解决better-scroll实现上下拉加载效果所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。