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 項目中快速實現下拉刷新和上拉載入操作，提升頁面流暢度。