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

先附上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(){//监听数据变化，重新初始化滚动函数
				seTimeout(()=>{//提前加载滚动插件
					this.refresh();
					if(scrollStyle === 'up'){//如果是上拉，滚动条直接滚动到
								this.scroll.scrollTo(0,this.satrY-(115*this.lastList))
					}
				},20)
			}
	},
	methods:{
				_initSlider(){//下拉刷新，上拉加载
						if(!this.$refs.wrapper){
							return
						}
						//better-scroll初始化
						this.scrool = new BScroll(this.$refs.wrapper,{
									probeType:3,
									click:true,
									scrollx:true
						});
						this.scool.on('scroll',pos=>{
							this.satry = pos.y;
							//如果下拉超过50px 就显示下拉刷新的文字
							this.down = true;
							pos.y > 50 ?(this.down = true):(this.down = false)
						});
						//touchEnd 通过这个方法来监听下拉刷新
						this.scroll.on('touchEnd ',pos=>{
							//下拉动作
							if(pos.y > 10){
									this.scrollStyle = 'down';
									this.down = true;
									console.log('下拉刷新');
									this.pagNo = 1; //请求第一页
									this.upend = false;
									this.totalBalance = 0;//下拉刷新合计清0
									this.upend = false;
									this.getData().then(res=>{
									//刷新数据
									this.down = false;
									this.miningList.length = 0;//去除旧数据，防止数组一直累加
									this.miningList = res;
									return
									})
							}

							if(this.scroll.maxScrollY > pos.y +10){//这里的10是距离底部多少像素的时候触发
								if(!this.bol){//如果是最后一次请求
										this.up = false;
										this.upend = true;
										return
								}
								this.satry = pos.y;
								this.scrollStyle = 'up';
								console.log('上拉刷新');
								this.up = true;
								this.pageNo = this.pageNoNew;//赋值之前存储的当前页数
								if(this.up){
									this.getData().then(res=>{
										this.miningList = res;
									})
								}
								
							}
						})
						
						
				}
	},
	refresh(){
	this.scroll && this.scroll .refresh();
	}

}

以上代码都是 scoll.js里的

然后在需要使用无限加载的组件里

<!--注意，这里必须用v-show，以便预加载滚动插件-->
<div v-show='miningList.length > 0'> 
	<!--这里的类名 必须写 wrapper, ref也是必须写 wrapper-->
	<div class='wrapper' ref='wrapper'>
	<!--content 是滚动父级，必须写contert，把需要滚动加载的数据写在这个里边才可以滚动-->
			<ul class='content'>
				<transition name='fade'>
						<div class='newxin' v-show='down'>
						<!--本项目ui框架使用vant，使用vant的loading-->
						<p><v-loading size='24px'>下拉刷新</v-loading></p>
						</div>
				</transition>
			
				<li class='myorderList' v-for='(item,index) in miningList' :key="index" :id="`scroll-item-${index}`">
						<div @click='myOrderFind(index)'>
								<p> {{item.totalRealPrice}}元</p>
								<p> {{item.title}}</p>
								<p> {{item.totalRealPrice}}元</p>
						</div>			
				</li>
				<transition name='fade'>
						<div class='newxin'>
						<!--本项目ui框架使用vant，使用vant的loading-->
						<p  v-show='up'><v-loading size='24px'>加载中...</v-loading></p>
						<p  v-show='upend'><v-loading size='24px'>我们是有底线的</v-loading></p>
						</div>
				</transition>
			</ul>
	</div>
</div>

<div v-else>
	暂无数据
</div>

import { scrollMixin} from '../mixin/scoll';
export default {
		mixins:[scrollMixin],
		data(){//这里说一下之前在scoll.js里已经定义过的参数这里可以不用再定义，如果定义了也不影响，只要和js里定义的一样就可以
			return{
				miningList:[],//异步获取数据
				pageNo:1,//第几页
				pageSize:10,//多少条
				pageNoNew :0,
				
			
			}
		},
		created(){
			this.getData();
		},
		methods:{
			getData(){//构造一个promise请求
				return new Promise(resolve => {
						this.up = false;
						this.down = false;
						this.$Api.getMyorder(this.pageNo,this.pageSize).then(resp =>{
							if(resp.code == 200){
								if(resp.data.length > 0){
										this.miningList = this.miningList.concat(resp.data);//注意，是连接数组，不是赋值
										this.totalBalance += resp.totalBalance ;
										this.pageNo++;
										this.pageNoNew = this.pageNo;//上拉加载时，存储当前页
								}
								if(this.miningList.length >= resp.total){
									this.bol = false;//停止请求数据
									this.upend = true;
								}else{
									this.bol = true;
									this.upend = false;
									this.up = false;
								}
							}else{
							//使用vant的错误提示
								this.$notify(resp.message);
							}
							
						})
						//请求成功返回异步获取的数据
						resolve(this.miningList)
				})
			}
		}
}

至此就实现了 手机上拉无限加载，下拉刷新的功能，注意 当第一次请求数据没有满屏时，是不会触发滚动插件的，要给滚动父级，也就是content，一个固定高，本项目给的是 60% 本文章代码纯手动输入，可能会有拼写错误，可以留言给我改正，感谢