> mescroll 是一個性能非常不錯的上拉加載下拉刷新插件，可以自定義下拉動態效果，優化用戶體驗 > 官方網址：http://www.mescroll.com/uni.html > 插件地址：https://ext.dcloud.net.cn/plugin?id=343 ## main.js引入mescroll插件 > 將mescroll-uni拷貝至components目錄下，或者可直接在uniapp插件里搜索mescroll，選擇導入插件 ~~~ import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue" import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue" Vue.component('mescroll-body', MescrollBody) Vue.component('mescroll-uni', MescrollUni) ~~~ ## 頁面中進行使用 ~~~ <template> <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption"> <view class="news-li" v-for="(item, index) in dataList" :key="index"> <view>{{item.name}}</view> <view class="new-content">from {{item.frompage}}</view> </view> </mescroll-body> </template> <script> import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"; export default { mixins: [MescrollMixin], data() { return { upOption: { page: { size: 10 // 每頁數據的數量 }, textNoMore: '~ 沒有數據咯 ~', empty: { tip: '~ 暫無相關數據 ~' // 初始化第一頁時，沒有結果的提示 } }, dataList: [] } }, methods: { /*上拉加載的回調: 其中page.num:當前頁 從1開始, page.size:每頁數據條數,默認10 */ upCallback(page) { //聯網加載數據 let that = this uni.request({ url: "http://www.test.com/wk/list?name=testtitle&page=" + page.num, data: "", method: "GET", header: { "content-type": "application/json" }, success: function(res) { // 下拉刷新的時候也會調用upCallback()，這個時候會將page.num重置為1，需我們自己將dataList設置為空 if (page.num == 1) that.dataList = [] // 根據當頁請求返回的data.length與我們設置的page.size進行比對，如果data.length < page.size則沒有下一頁數據 let curPageLen = res.data.data.length; that.mescroll.endSuccess(curPageLen); //設置列表數據 that.dataList = that.dataList.concat(res.data.data) }, fail: function() { //聯網失敗, 結束加載 this.mescroll.endErr(); } }) } } } </script> <style> .news-li{font-size: 32upx;padding: 32upx;border-bottom: 1upx solid #eee;} .news-li .new-content{font-size: 28upx;margin-top: 10upx;margin-left: 20upx;color: #666;} </style> ~~~ ## 服務端代碼 ~~~ public function actionList() { $name = get('name'); $page = get('page', 1); $pagesize = 10; if ($page > 5) jsonSuccess([]); $items = array(); for ($i=0; $i<$pagesize; $i++) { $number = $i+1; $items[] = [ 'name' => $name."(第{$number}個)", 'frompage' => $page ]; } jsonSuccess($items); } ~~~