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

mescroll使用上拉加载、下拉刷新相关推荐

php mescroll,mescroll.js上拉加载下拉刷新组件使用详解
本文实例为大家分享了上拉加载下拉刷新组件mescroll.js的具体代码,供大家参考,具体内容如下使用注意事项: 1.引入的时候出问题及时看官方给出的解决方案(基本上都必须看): 2.react中一 ...
php微信小程序向下滑动,微信小程序功能实现：上滑加载下拉刷新
本篇文章给大家带来的内容是关于微信小程序功能实现:上滑加载下拉刷新,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 之前谈到文章列表的数据加载,是一次性全部加载,这样是不友好的.这章介 ...
ionic上拉加载-下拉刷新
ionic上拉加载-下拉刷新 1.上拉加载 <ion-infinite-scroll on-infinite="loadOlderStories()" distance=&q ...
Mint-ui中loadmore(上拉加载下拉刷新)组件在ios中滑动会触发点击事件的解决方法...
bug说明: Mint-ui中loadmore(上拉加载下拉刷新)组件在使用fastclick的情况下 ,在ios设备中滑动会触发点击事件: 解决方法: 我是按需引入,去项目中找到loadmore ...
教你如何使用SwipeRefreshLayout来构建一个上拉加载下拉刷新框架
前言: 基本上所以的移动端应用都有Listview(当然RecyclerView也一样),那必不可少的都会嵌入一个上拉加载下拉刷新的功能.这样能大大的减少用户的流量消耗,同样对于用户也有更好的用户体验 ...
ios 上拉加载下拉刷新
在一款 App应用中有的时候会用到上拉加载下拉刷新的功能,本人觉得SVPullToRefresh很好用(可以用在UIScrollView上,包括UITableview和UICollectionView ...
微信公众号上拉加载下拉刷新
最近再再做一个公众号的项目有需要用到上拉加载,下拉刷新的技术.在网上找了很久,终于找到一个很好用 js 插件,今天我就把这个插件分享给大家,该包可用于App和微信公众号 , 资源下载地址:https: ...
上拉加载下拉刷新了解下
2019独角兽企业重金招聘Python工程师标准>>> 老样子,我们先,哦不,今天我们直接上思路,没有效果图,真的没有我们依旧从界面及逻辑两块进行分析 1.界面上,只分成简单的两块 ...
vue 实现上拉加载下拉刷新（思路贼清晰）
项目需要用到上拉刷新下拉加载所以自己手动实现了一个组件: <template><div class="my-scroll" :class="[scr ...
h5结合vant框架，实现列表上拉加载下拉刷新
最近在做h5移动页面开发,并且需要用移动端android和ios将h5嵌进去.在开发过程中,使用了vant这个框架: vant文档:https://youzan.github.io/vant/#/zh ...

mescroll使用上拉加载、下拉刷新

1、安装包

2、引入mescroll的vue组件

3、注册为组件

4、加标签

5、data中配置

6、定义初始化方法及回调方法

7、点击不同筛选条件时，重置并拼接dataList，并更新上拉加载

一个页面多次调用mescroll

mescroll使用上拉加载、下拉刷新相关推荐

最新文章

热门文章