之前一直使用的uni-app自帶的刷新方式友鼻，后來(lái)看到插件市場(chǎng)中人氣最旺的mescroll，一直也沒(méi)嘗試用闺骚，今天特意看了下他的文檔彩扔，刷新數(shù)據(jù)so easy
1.下載插件
點(diǎn)擊 mescroll，使用 HBuilderX 導(dǎo)入插件
2.無(wú)需配置
pages.json(檢查是否配置了多余的屬性):
{
"path" : "pages/xxx/xxx", // 在具體的頁(yè)面中, mescroll-body 無(wú)需像 mescroll-uni 那樣需要配置 pages.json
"style" : {
"navigationBarTitleText" : "xxx",
"backgroundColorTop":"#FFFFFF", // iOS下拉bounce回彈區(qū)域的顏色 (與down.bgColor同步)
"backgroundColorBottom":"#FFFFFF", // iOS上拉bounce回彈區(qū)域的顏色 (與up.bgColor同步)
"disableScroll": false, //刪除此項(xiàng): mescroll-body必須允許原生頁(yè)面滾動(dòng), 默認(rèn)false
"enablePullDownRefresh" : false, //刪除此項(xiàng): 不開(kāi)啟系統(tǒng)自帶的下拉刷新, 默認(rèn)false
"app-plus" : {
"bounce" : "none" //可選: 是否禁止iOS回彈和Android觸頂觸底的弧形陰影, 默認(rèn)允許 (可配在 'globalStyle')
},
"mp-alipay":{"allowsBounceVertical":"NO"} //可選: 取消支付寶和釘釘小程序的iOS回彈 (可配在 'globalStyle')
}
},
"globalStyle" : {
"backgroundColorTop":"#FFFFFF" // iOS APP真機(jī)bounce回彈區(qū)域默認(rèn)灰色,建議統(tǒng)一重置為白色
}
import MescrollMixin僻爽， 并設(shè)置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.設(shè)置
mescroll-body
<template>
<view class="content">
<!--
下面是固定格式, 函數(shù)名千萬(wàn)不要亂寫(xiě)
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.加載數(shù)據(jù)
mescrollInit 和 downCallback回調(diào)函數(shù)不用寫(xiě)虫碉，mixins已默認(rèn)
async upCallback(page) {
try {
var params = {};
params.page = page.num; // 頁(yè)碼, 默認(rèn)從1開(kāi)始
params.perPage = page.size; // 頁(yè)長(zhǎng), 默認(rèn)每頁(yè)10條
var res = await getOrderList(params);
let curDataList = res.orderlist;
var pageData = res.pageData;
//設(shè)置列表數(shù)據(jù)
if (page.num == 1) this.dataList = []; //如果是第一頁(yè)需手動(dòng)置空列表
this.dataList = this.dataList.concat(curDataList); //追加新數(shù)據(jù)
this.mescroll.endByPage(curDataList.length, pageData.pageNum);
console.log("mescroll-body pageData.curPage: ", pageData.curPage, ' pageData.pageNum: ', pageData
.pageNum);
} catch (e) {
// 請(qǐng)求失敗,隱藏加載狀態(tài)
console.log('上拉加載更多出錯(cuò)了');
this.mescroll.endErr()
}
}
頁(yè)面完整代碼如下：
<template>
<view class="content">
<!--
下面是固定格式, 函數(shù)名千萬(wàn)不要亂寫(xiě)
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); // 設(shè)置分頁(yè)加載每頁(yè)size
this.mescroll.optUp.empty.icon =
"https://saas-one.oss-cn-beijing.aliyuncs.com/H5/alopecia/data.png"; // 動(dòng)態(tài)設(shè)置空布局的圖標(biāo)
},
methods: {
async upCallback(page) {
try {
var params = {};
params.page = page.num; // 頁(yè)碼, 默認(rèn)從1開(kāi)始
params.perPage = page.size; // 頁(yè)長(zhǎng), 默認(rèn)每頁(yè)10條
var res = await getOrderList(params);
let curDataList = res.orderlist;
var pageData = res.pageData;
//設(shè)置列表數(shù)據(jù)
if (page.num == 1) this.dataList = []; //如果是第一頁(yè)需手動(dòng)置空列表
this.dataList = this.dataList.concat(curDataList); //追加新數(shù)據(jù)
// 請(qǐng)求成功,隱藏加載狀態(tài)
//方法一(推薦): 后臺(tái)接口有返回列表的總頁(yè)數(shù) totalPage
this.mescroll.endByPage(curDataList.length, pageData.pageNum);
console.log("mescroll-body pageData.curPage: ", pageData.curPage, ' pageData.pageNum: ', pageData
.pageNum);
} catch (e) {
// 請(qǐng)求失敗,隱藏加載狀態(tài)
console.log('上拉加載更多出錯(cuò)了');
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>
