vue 使用better-scroll实现无限加载（上拉刷新，下拉加载）

最新推荐文章于 2024-03-30 18:31:59 发布

柚子233

最新推荐文章于 2024-03-30 18:31:59 发布

阅读量2.6k

点赞数 1

分类专栏： vue 文章标签： vue 前端 better-scroll vue使用better-scroll

本文链接：https://blog.csdn.net/qq_37816525/article/details/96474516

版权

先附上better-scroll官方文档
https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/#better-scroll%20%E6%98%AF%E4%BB%80%E4%B9%88

和 ui 框架 vant 官方文档

https://youzan.github.io/vant/#/zh-CN/intro
在使用vant内置的无限加载时，出现一系列bug，项目时间紧迫遂放弃(后续会继续研究)，直接使用better-scroll，vant使用按需加载，不用担心性能问题

本项目使用vue混入mixin的方式共用js代码，方便每个组件引用，也可以把mixin中的代码直接写在组件里单独使用

首先npm安装 better-scroll

npm install better-scroll --save

新建mixin文件夹，新建scool.js

import BScroll from 'better-scroll'

export const scrollMixin={

	data(){
		return{
		
			down:false,//下拉时顶部是否显示加载中
			up:false,//上拉时底部是否显示加载中
			upend:false,//数据加载完成底部提示
			bol:false,//最后一次加载
			scrollStyle :'',
			sateY:0,
			lastList:0,//最后一页是几条
			totalBalance:0,//合计，后端只返回每页的合计，需累加
		}
	},
	created(){
		setTimeout(()=>{//提前加载滚动插件
			this._initSlider()
		},20)
	},
	watch:{
			miningList(){//监听数据变化