> mescroll 是一个性能非常不错的上拉加载下拉刷新插件，可以自定义下拉动态效果，优化用户体验 > 官方网址：[http://www.mescroll.com/uni.html](http://www.mescroll.com/uni.html) > 插件地址：[https://ext.dcloud.net.cn/plugin?id=343](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); } ~~~