上拉刷新,下拉加载这个功能实际上在我们的应用当中使用范围是很广的,比如说商城中心在展示商品的时候就可以使用下拉加载这样的功能,那么如何实现呢?
首先遇到这个功能我就去搜插件市场了。经过我下载了不少的插件,我发现了一个非常不错的插件。
插件地址:
https://ext.dcloud.net.cn/plugin?id=343
官网地址:
http://www.mescroll.com/uni.html#load
这个官网里面的示例和讲解是非常清楚的,通过示例我们可以照着实现这个功能。
刷新的示例代码:
在项目中使用:
// An highlighted block
template部分:
<!-- top="xxx"下拉布局往下偏移,防止被悬浮菜单遮住 -->
<mescroll-uni top="120" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick" @init="mescrollInit">
<!-- 数据列表 -->
<pd-list :list="pdList"></pd-list>
</mescroll-uni>
script部分:
import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
import PdList from "@/components/other/pd-list.vue";
import mockData from "@/common/pdlist.js"; // 模拟数据
export default {
components: {
MescrollUni,
PdList
},
data() {
return {
mescroll: null, //mescroll实例对象
downOption:{
auto:false, // 不自动加载
},
upOption:{
auto:false, // 不自动加载
// page: {
// num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
// size: 10 // 每页数据的数量
// },
noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
empty:{
tip: '~ 空空如也 ~', // 提示
btnText: '去看看'
}
}