之前一直使用的uni-app自带的刷新方式，后来看到插件市场中人气最旺的mescroll，一直也没尝试用，今天特意看了下他的文档，刷新数据so easy
1.下载插件
点击 mescroll，使用 HBuilderX 导入插件
2.无需配置
pages.json(检查是否配置了多余的属性):
{
"path" : "pages/xxx/xxx", // 在具体的页面中, mescroll-body 无需像 mescroll-uni 那样需要配置 pages.json
"style" : {
"navigationBarTitleText" : "xxx",
"backgroundColorTop":"#FFFFFF", // iOS下拉bounce回弹区域的颜色 (与down.bgColor同步)
"backgroundColorBottom":"#FFFFFF", // iOS上拉bounce回弹区域的颜色 (与up.bgColor同步)
"disableScroll": false, //删除此项: mescroll-body必须允许原生页面滚动, 默认false
"enablePullDownRefresh" : false, //删除此项: 不开启系统自带的下拉刷新, 默认false
"app-plus" : {
"bounce" : "none" //可选: 是否禁止iOS回弹和Android触顶触底的弧形阴影, 默认允许 (可配在 'globalStyle')
},
"mp-alipay":{"allowsBounceVertical":"NO"} //可选: 取消支付宝和钉钉小程序的iOS回弹 (可配在 'globalStyle')
}
},
"globalStyle" : {
"backgroundColorTop":"#FFFFFF" // iOS APP真机bounce回弹区域默认灰色,建议统一重置为白色
}
import MescrollMixin， 并设置mixins
<script>
import {
getOrderList
} from '@/common/apis/mine.js'
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
mixins: [MescrollMixin], // 使用mixin
}
</script>
4.设置
mescroll-body
<template>
<view class="content">
<!--
下面是固定格式, 函数名千万不要乱写
ref="mescrollRef"
@init="mescrollInit"
@down="downCallback"
@up="upCallback"
-->
<mescroll-body class='content__scroll' ref="mescrollRef" @init="mescrollInit" @down="downCallback"
@up="upCallback">
<block v-for="(item,index) in dataList" :key="index">
<view class="content__scroll__item">
<text>{{item.hospital_name}}</text>
<text>{{item.depart}}</text>
<text>{{item.in_date}}</text>
</view>
</block>
</mescroll-body>
</view>
</template>
5.加载数据
mescrollInit 和 downCallback回调函数不用写，mixins已默认
async upCallback(page) {
try {
var params = {};
params.page = page.num; // 页码, 默认从1开始
params.perPage = page.size; // 页长, 默认每页10条
var res = await getOrderList(params);
let curDataList = res.orderlist;
var pageData = res.pageData;
//设置列表数据
if (page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
this.dataList = this.dataList.concat(curDataList); //追加新数据
this.mescroll.endByPage(curDataList.length, pageData.pageNum);
console.log("mescroll-body pageData.curPage: ", pageData.curPage, ' pageData.pageNum: ', pageData
.pageNum);
} catch (e) {
// 请求失败,隐藏加载状态
console.log('上拉加载更多出错了');
this.mescroll.endErr()
}
}
页面完整代码如下：
<template>
<view class="content">
<!--
下面是固定格式, 函数名千万不要乱写
ref="mescrollRef"
@init="mescrollInit"
@down="downCallback"
@up="upCallback"
-->
<mescroll-body class='content__scroll' ref="mescrollRef" @init="mescrollInit" @down="downCallback"
@up="upCallback">
<block v-for="(item,index) in dataList" :key="index">
<view class="content__scroll__item">
<text>{{item.hospital_name}}</text>
<text>{{item.depart}}</text>
<text>{{item.in_date}}</text>
</view>
</block>
</mescroll-body>
</view>
</template>
<script>
import {
getOrderList
} from '@/common/apis/mine.js'
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
mixins: [MescrollMixin], // 使用mixin
data() {
return {
dataList: [],
}
},
mounted() {
this.mescroll.setPageSize(20); // 设置分页加载每页size
this.mescroll.optUp.empty.icon =
"https://saas-one.oss-cn-beijing.aliyuncs.com/H5/alopecia/data.png"; // 动态设置空布局的图标
},
methods: {
async upCallback(page) {
try {
var params = {};
params.page = page.num; // 页码, 默认从1开始
params.perPage = page.size; // 页长, 默认每页10条
var res = await getOrderList(params);
let curDataList = res.orderlist;
var pageData = res.pageData;
//设置列表数据
if (page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
this.dataList = this.dataList.concat(curDataList); //追加新数据
// 请求成功,隐藏加载状态
//方法一(推荐): 后台接口有返回列表的总页数 totalPage
this.mescroll.endByPage(curDataList.length, pageData.pageNum);
console.log("mescroll-body pageData.curPage: ", pageData.curPage, ' pageData.pageNum: ', pageData
.pageNum);
} catch (e) {
// 请求失败,隐藏加载状态
console.log('上拉加载更多出错了');
this.mescroll.endErr()
}
}
}
}
</script>
<style lang="scss">
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
&__scroll {
width: 100%;
&__item {
width: 100%;
color: #333;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
background-color: #F6F6F6;
margin-bottom: 20rpx;
}
}
}
</style>
网友评论