mescroll使用上拉加载、下拉刷新
公良云
//bug：如果一个页面多个，必须使用v-show控制显示隐藏
1、安装包
注：position: fixed; // 必须使用固定定位
.mescroll {
position: fixed;
top: 120px;
bottom: 0;
height: auto;
}
npm install --save mescroll.js
2、引入mescroll的vue组件
import MescrollVue from 'mescroll.js/mescroll.vue'
3、注册为组件
components: {
MescrollVue // 注册mescroll组件
},
4、加标签
<template>
<div>
<!--mescroll滚动区域的基本结构-->
<mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
<!--内容...-->
</mescroll-vue>
</div>
</template>
5、data中配置
data () {
return {
mescroll: null, // mescroll实例对象
dataList: [] , // 请求到的列表数据
dataList: {}, //商品上拉加载不同筛选条件传入的参数（参数一致不需要）
mescrollDown:{}, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
mescrollUp: { // 上拉加载的配置.
callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
> 以下配置均可省略
//以下是一些常用的配置,当然不写也可以的.
page: {
num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
size: 10 //每页数据条数,默认10
},
htmlNodata: '<p class="upwarp-nodata">-- END --</p>',
noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
这就是为什么无更多数据有时候不显示的原因
toTop: {
//回到顶部按钮
src: "./static/mescroll/mescroll-totop.png", //图片路径,默认null,支持网络图
offset: 1000 //列表滚动1000px才显示回到顶部按钮
},
empty: {
//列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
warpId: "xxid", //父布局的id (1.3.5版本支持传入dom元素)
icon: "./static/mescroll/mescroll-empty.png", //图标,默认null,支持网络图
tip: "暂无相关数据~" //提示
}
},
}
},
6、定义初始化方法及回调方法
methods: {
// mescroll组件初始化的回调,可获取到mescroll对象
mescrollInit (mescroll) {
this.mescroll = mescroll // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
},
// 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
upCallback (page, mescroll) {
// 联网请求
axios.get('xxxxxx', {
params: {
// 公共参数
num: page.num, // 页码
size: page.size // 每页长度
// 对于筛选条件，传递不同的参数，以下定义参数
a:this.dataList.a,
b:this.dataList.b,
}
}).then((response) => {
// 请求的列表数据
let arr = response.data
// 如果是第一页需手动置空列表
if (page.num === 1){
this.dataList = []
}
// 把请求到的数据添加到列表
this.dataList = this.dataList.concat(arr)
// 数据渲染成功后,隐藏下拉刷新的状态
this.$nextTick(() => {
mescroll.endSuccess(arr.length,true) //当前页条数 ，是否有下页
// mescroll.endByPage(dataSize, totalPage); //总页数
// mescroll.endBySize(dataSize, totalSize); //总条数
})
}).catch((e) => {
// 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
mescroll.endErr()
})
}
}
}
7、点击不同筛选条件时，重置并拼接dataList，并更新上拉加载
// 店铺筛选点击事件 //storeSelect 店铺筛选 综合1 销量2 信用3
storeSelected(id) {
this.storeSelect = id;
this.dataList2 = {}; //重置参数
if (id == 1) {
this.mescroll.resetUpScroll();
} else if (id == 2) {
this.dataList = {
store_sales: 1
};
this.mescroll.resetUpScroll();
} else if (id == 3) {
this.dataList = {
store_credit: 1
};
this.mescroll.resetUpScroll();
}
}
}
一个页面多次调用mescroll
注：this.navData[1].mescroll.resetUpScroll(); // 点击筛选重置方法
<template>
<div class="healthy-bean-record-c">
<div class="top">
[外链图片转存失败(img-pPYyrr3K-1562119870434)(https://mp.csdn.net/assets/images/mine/tixianjilu.png)]
</div>
<div class="navLine">
<!-- <van-tabs v-model="active" swipeable animated> -->
<van-tabs v-model="active" swipeable>
<van-tab :title="navData[0].tit">
//参数名和初始化方法名需进行区分
<mescroll-vue ref="mescroll0" :up="mescrollUp0" @init="mescrollInit0">
<div class="item" v-for="(item,index) in navData[0].dataList">
<span class="s1">{{item.desc}}</span>
<span class="s2">{{item.addtime}}</span>
<span class="s3" v-if="item.status==1">+{{item.num}}健康豆</span>
<span class="s3" v-else-if="item.status==2">-{{item.num}}健康豆</span>
</div>
</mescroll-vue>
</van-tab>
<van-tab :title="navData[1].tit">
//参数名和初始化方法名需进行区分
<mescroll-vue ref="mescroll1" :up="mescrollUp1" @init="mescrollInit1">
<div class="item" v-for="(item,index) in navData[1].dataList">
<span class="s1">{{item.desc}}</span>
<span class="s2">{{item.addtime}}</span>
<span class="s3">+{{item.num}}健康豆</span>
</div>
</mescroll-vue>
</van-tab>
<van-tab :title="navData[2].tit">
//参数名和初始化方法名需进行区分
<mescroll-vue ref="mescroll2" :up="mescrollUp2" @init="mescrollInit2">
<div class="item" v-for="(item,index) in navData[2].dataList">
<span class="s1">{{item.desc}}</span>
<span class="s2">{{item.addtime}}</span>
<span class="s3">-{{item.num}}健康豆</span>
</div>
</mescroll-vue>
</van-tab>
</van-tabs>
</div>
</div>
</template>
<script>
import MescrollVue from "mescroll.js/mescroll.vue";
import axios from "axios";
import qs from "qs";
export default {
data: function() {
return {
// 三个配置项
mescrollUp0: {
callback: this.upCallback
},
mescrollUp1: {
callback: this.upCallback
},
mescrollUp2: {
callback: this.upCallback
},
// 使用数组接收三个列表
navData: [
{
tit: "全部",
mescroll: null,
dataList: []
},
{
tit: "收入",
mescroll: null,
dataList: []
},
{
tit: "支出",
mescroll: null,
dataList: []
}
]
};
},
components: { MescrollVue },
methods: {
// 三个初始化方法
mescrollInit0(mescroll) {
this.navData[0].mescroll = mescroll;
},
mescrollInit1(mescroll) {
this.navData[1].mescroll = mescroll;
},
mescrollInit2(mescroll) {
this.navData[2].mescroll = mescroll;
},
// 一个公用的回调函数，使用if判断是哪个
upCallback(page, mescroll) {
console.log(page);
console.log(this.active);
if (this.active === 0) {
//全部
this.$http("/cml/api/newuser/jiankang", {
/*pageNum: page.num,
pageSize: this.pageSize,*/
status: -1
})
.then(res => {
let arr = res.data;
if (page.num === 1) {
this.navData[0].dataList = [];
}
this.navData[0].dataList = this.navData[0].dataList.concat(arr);
this.$nextTick(() => {
mescroll.endSuccess(arr.length, false);
});
})
.catch(err => {
mescroll.endErr();
});
} else if (this.active === 1) {
// 收入
this.$http("/cml/api/newuser/jiankang", {
/*pageNum: page.num,
pageSize: this.pageSize,*/
status: 1
})
.then(res => {
let arr = res.data;
if (page.num === 1) {
this.navData[1].dataList = [];
}
this.navData[1].dataList = this.navData[1].dataList.concat(arr);
this.$nextTick(() => {
mescroll.endSuccess(arr.length, false);
});
})
.catch(err => {
mescroll.endErr();
});
} else {
// 支出
this.$http("/cml/api/newuser/jiankang", {
/*pageNum: page.num,
pageSize: this.pageSize,*/
status: 2
})
.then(res => {
let arr = res.data;
if (page.num === 1) {
this.navData[2].dataList = [];
}
this.navData[2].dataList = this.navData[2].dataList.concat(arr);
this.$nextTick(() => {
mescroll.endSuccess(arr.length, false);
});
})
.catch(err => {
mescroll.endErr();
});
}
}
}
};
</script>
<style lang="less" scoped>
/*固定高度*/
.mescroll {
position: fixed;
top: 6.07rem;
bottom: 0;
height: auto;
/*如设置bottom:50px,则需height:auto才能生效*/
}
.van-tabs--line {
padding-top: 1.32rem;
}
/deep/.van-tabs--line .van-tabs__wrap {
height: 1.32rem;
}
.healthy-bean-record-c {
&:before {
content: "";
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
z-index: -1;
background-color: white;
}
.top {
width: 100%;
height: 3.4rem;
text-align: center;
border-bottom: 0.05rem solid #d9d9d9;
.img {
width: 2.26rem;
padding-top: 0.6rem;
}
}
.item {
margin: 0.8rem 0.74rem;
display: flex;
justify-content: space-between;
.s1 {
width: 30%;
font-size: 0.34rem;
color: #232323;
}
.s2 {
width: 45%;
font-size: 0.32rem;
color: #232323;
text-align: center;
}
.s3 {
width: 25%;
font-size: 0.31rem;
color: #ac415d;
text-align: right;
}
}
}
</style>
类似资料：