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里的
然后在需要使用无限加载的组件里
下拉刷新
-
{{item.totalRealPrice}}元
{{item.title}}
{{item.totalRealPrice}}元
加载中...
我们是有底线的
暂无数据
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% 本文章代码纯手动输入，可能会有拼写错误，可以留言给我改正，感谢