一、基本介绍
Mescroll-uni 是一个适用于 uni-app 的下拉刷新和上拉加载组件。这个组件支持拓展性好,使用简单,兼容性强等特点,被广泛应用于 uni-app 项目中。
下面我们来看看 Mescroll-uni 的一些优点:
- 支持 Vue 和 nvue 两种加载方式
- 支持下拉刷新和上拉加载的配置项多
- 支持大数据量场景,性能也很好
- 支持在不同平台上使用
- 支持多语言
- 支持页面缓存
下面我们将对 Mescroll-uni 的这些特点进行详细介绍。
二、支持 Vue 和 nvue 两种加载方式
Mescroll-uni 支持两种加载方式:Vue 和 nvue。在应用中,根据应用场景自行选择对应的加载方式。
Vue 加载方式 <template> <view> <mescroll-uni :down="downOption" :up="upOption" @down="down" @up="up"> <!-- 这里是数据列表 --> </mescroll-uni> </view> </template> nvue 加载方式 <template> <view> <mescroll-nvue :down="downOption" :up="upOption" @down="down" @up="up"> <!-- 这里是数据列表 --> </mescroll-nvue> </view> </template>
三、支持下拉刷新和上拉加载的配置项多
Mescroll-uni 的下拉刷新和上拉加载组件可以自定义配置项,比如展示加载动画,提示文案,扩展自定义参数等。
下面是 down 和 up 配置参考示例:
// down 配置项 downOption: { use: true, auto: false, isLock: false, isBoth: false, offset: '100px', outOffsetRate: 0.2, bottomOffset: '0px', bottomMethod: function () {}, hardwareClass: 'mescroll-hardware', warpId: 'mescroll-downwarp', mustToTop: false, minAngle: 45, scrollTopDelay: 500, borderY: 0, sysOffset: 0, inOffsetY: 0, isNative: true, isBounce: true, beforeDownLoading: function () {}, callback: function () {} } // up 配置项 upOption: { callback: function () {}, use: true, auto: false, noMoreSize: 20, page: { num: 0, size: 10 }, empty: { warpId: 'mescroll-empty', icon: 'mescroll-empty-icon', tip: '暂无数据', btntext: '', btnClick: null }, clearEmptyId: null, toTop: { warpId: 'mescroll-totop', src: '', html: '返回顶部', listen: null, offset: 1000 }, warpId: 'mescroll-upwarp', hardwareClass: 'mescroll-hardware', isBounce: true, isInApp: true, noMoreSize: 5, lazyLoad: { use: false, offset: 100, upCallback: null, imgSelector: '' }, toBottom: { callback: null, offset: 100, warpId: 'mescroll-tobottom', showLoading: true, isLock: false, hardwareClass: 'mescroll-hardware' } }
四、支持大数据量场景,性能也很好
Mescroll-uni 可以自适应每一页显示的列表数据,即使列表数据数量非常多,也能实现较高的性能。
下面是一个展示加载大数据量的 Demo 示例:
{{ item }}
五、支持在不同平台上使用
无论在什么平台,Mescroll-uni 都可以支持下拉刷新和上拉加载操作,可以适用于 Android,iOS 等各种设备。
六、支持多语言
Mescroll-uni 支持多语言操作,可以实现中文和英文等不同语言的模板显示。
Vue.use(MescrollUni, { // 全局配置 language: 'en', // 这个是默认的显示语言 languageList: ['zh', 'en'], // 支持的语言列表 i18n: { /* 这里定义相关语言对应的数据,具体可查看文档 */} })
七、支持页面缓存
Mescroll-uni 支持页面缓存,可以在切换页面的时候缓存当前页面状态,以便用户再次返回时可以恢复到上次的状态。
export default { onHide() { MescrollMixin.pageCache(this) // 页面隐藏时缓存页面状态 }, onShow() { MescrollMixin.pageRestore(this) // 页面显示时恢复状态 } }
八、总结
通过本文的介绍,我们可以了解到,Mescroll-uni 是一个极其强大的下拉刷新和上拉加载组件,不仅兼容性好,使用简单,而且还支持多语言,页面缓存等一系列优点。借助 Mescroll-uni,我们可以在 uni-app 项目中快速实现下拉刷新和上拉加载操作,提升页面流畅度。