//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:每页数据条数,默认10upCallback (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)(/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>
