您的位置:

Mescroll-uni: 一个强大的下拉刷新和上拉加载组件

一、基本介绍

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 项目中快速实现下拉刷新和上拉加载操作,提升页面流畅度。