小程序分頁實踐之編寫可復用分頁組件
項目中遇到 tab切換列表，每個tab都需要分頁的需求，分頁流程具有相似性，于是想將分頁封裝為組件，方便應用。
組件的應用已寫成一個小demo，效果如下圖所示（數據用mock模擬）：
源碼可以查看：wxapp-pagination
項目需求
具體項目需求：
- 查看自己相關的會議（頁面命名為 meetings）
- tab切換，分為：
- “我的會議”（我參加的會議，后面會以 "join" 為 key區(qū)分）
- “我的預約”（我預約的會議，后面會以 "book" 為 key區(qū)分）
- 一次加載10條（size=10），拉到底部后，加載下一頁（page = page +1）
當然，作為前端，要考慮性能方面的需求：
- 首次只加載默認tab頁的首頁，其他tab等到點擊到對應tab才開始加載。
- 回到已加載過的tab頁，保留原數據不重新加載。
所以原型圖大概就長這樣：
邏輯實現
與分頁邏輯相關的項目結構如下：
├── components │ ├── meeting-item # 列表item │ └── pagination # 分頁組件 ├── model │ └── user.js # 我的相關 model └── pages │ └── user # 我的相關頁面 │ ├── meetings # 我的會議（就是tab要分頁的頁面啦） │ └── ... │ └── vant-weapp
還是用圖理一下他們之間的關系吧：
在組件內監(jiān)聽觸發(fā)分頁事件
觸發(fā)分頁的事件是滾動到頁面的底部，小程序中，觸發(fā)該事件是Page頁面的onReachBottom事件，但是這個事件只能在Page中觸發(fā)，所以要將這個觸發(fā)時機傳遞給pagination組件。
解決思路是：組件 pagination 內，設置key屬性，每當onReachBottom事件觸發(fā)之后，設置組件屬性 key 為一個隨機字符串，當組件 pagination 監(jiān)聽到key的變化的時候，做出分頁操作。
// components/pagination/index.js
Component({
properties: {
key: {
type: String,
observer: '_loadMoreData' // _loadMoreData 為分頁操作
}
}
})
<!-- pages/user/meetings/index.wxml -->
<tabs active="{{currentTab}}" bind:change="onChange">
<tab title="我的會議" data-key="{{type['JOIN']}}">
<view class="meeting-list">
<pagination
name="JOIN"
key="{{joinKey}}"
>
</pagination>
</view>
</tab>
<tab title="我的預約">
<view class="meeting-list">
<pagination
name="BOOK"
key="{{bookKey}}"
>
</pagination>
</view>
</tab>
</tabs>
Page({
onReachBottom(){
const key = scene[+this.data.currentTab].key // 對應tab對應key
this.setData({
[key]: random(16)
})
}
})
分頁組件的實現邏輯
觸發(fā)到達底部之后，需要加載數據。但再加載之前，先滿足加載的條件：
- 上一頁還未加載完成（loading = true），不重復加載
- 當前頁面全部加載完（ended = true），不繼續(xù)加載
具體加載流程為：
- page：觸發(fā) onReachBottom 事件，修改 pagination組件 key 值
- component： key值監(jiān)聽到變化，觸發(fā)加載事件 _loadMoreData
- component： _loadMoreData 中判斷滿足條件后，觸發(fā)加載列表函數 this.triggerEvent('getList')，并傳入頁面參數page 和 size。
- page：向model層獲取數據。
- page：獲取數據后，傳遞給 pagination組件list和total 值。
- component：list 監(jiān)聽到變化，判斷是否加載完成。
component
// components/pagination/index.js
Component({
properties: {
name: String,
key: {
type: String,
observer: '_loadMoreData' // _loadMoreData 為分頁操作
},
size: { // 每次加載條目數
type: Number,
value: 10
},
total: Number, // 頁面總數
list: { // 已加載條目
type: Array,
observer: '_endState' // 每次加載完新數據，判斷數據是否全部加載完成
}
},
data: {
page: 0, // 當前第幾頁
loading: false, // 是否正在加載
ended: false // 數據是否已全部加載完成
},
methods: {
_loadMoreData(){
const { loading, ended, size } = this.data
if (loading) return // 上一頁還未加載完成，不加載
if (ended) return // 當前頁面全部加載完，不加載
const page = this.data.page + 1
this.setData({
loading: true, // 開始加載新頁面loading設置為true
page
})
// 觸發(fā)加載下一頁，并傳入參數
this.triggerEvent('getList', {
page,
size
})
},
_endState(val, oldVal) {
const { total, list } = this.properties
let ended = false
// 判斷數據是否全部加載完成
if (list.length >= total) {
ended = true
}
this.setData({
loading: false, // 當前頁面加載完成，loading設置為false
ended
})
}
}
})
page
<!-- pages/user/meetings/index.wxml -->
<pagination
name="BOOK"
key="{{bookKey}}"
bind:getList="getBookMeetings"
list="{{bookMeetings}}"
total="{{bookTotal}}"
>
</pagination>
循環(huán)列表item
pagination組件獲取了可循環(huán)的列表，初始想法是循環(huán)slot，但是在slot中卻獲取不到 item 對象：
<view wx:for="{{list}}" wx:for-item="item" wx:key="index">
<slot></slot>
</view>
解決的辦法是將每個列表項封裝為組件，循環(huán)抽象節(jié)點，這樣對其他頁面的分頁具有可拓展性。
componentGenerics 字段中聲明：
// components/pagination/index.json
{
"componentGenerics": {
"selectable": true
},
// ...
}
使用抽象節(jié)點：
<!-- components/pagination/index.wxml -->
<view wx:for="{{list}}" wx:for-item="item" wx:key="index">
<selectable item="{{item}}"></selectable>
</view>
指定“selectable”具體是哪個組件：
<!-- pages/user/meetings/index.wxml --> <pagination generic:selectable="meeting-item" // ... 其他屬性 > </pagination>
對應 json 文件定義對應 usingComponents ：
// pages/user/meetings/index.json
{
"usingComponents": {
"pagination":"/components/pagination/index",
"meeting-item":"/components/meeting-item/index"
}
}
meeting-item 組件接收一個屬性 item，這樣在 meeting-item 組件中，就可以獲取到循環(huán)列表的item值，并正常繪制頁面。
實現切換懶加載
給pagination添加initImmediately屬性，當initImmediately為true時，首次加載頁面，并用變量 initState標記是否已經初始化頁面過。
// components/pagination/index.js
Component({
properties: {
initImmediately: {
type: Boolean,
value: true,
observer: function(val){
if (val && !this.data.initState) {
this.initData()
}
}
},
// ...
},
data: {
initState: false, // 是否已經加載過
// ...
},
lifetimes: {
attached: function () {
if (this.data.initImmediately){
this.initData()
}
},
},
methods: {
initData(){
console.info(`${this.data.name}:start init data`)
this._loadMoreData()
this.setData({
initState: true
})
},
// ...
_endState(val, oldVal) {
if (!this.data.initState) return
// ...
},
}
})
當currentTab為當前類型的時候，initImmediately 設置為 true。
<!-- pages/user/meetings/index.wxml -->
<pagination
name="JOIN"
init-immediately="{{currentTab==type['JOIN']}}"
// ...
>
</pagination>
<pagination
name="BOOK"
init-immediately="{{currentTab==type['BOOK']}}"
// ...
>
</pagination>
組件的復用
完成了以上組件，在對其他分頁的頁面，可以直接復用。比如，實現一個獲取全部用戶列表的分頁，只需要新增一個user-item的組件，像這樣調用：
<pagination
name="USER"
key="{{key}}"
bind:getList="getUserList"
list="{{userList}}"
total="{{userTotal}}"
generic:selectable="user-item"
>
</pagination>
具體應用可以查看我寫的小demo：wxapp-pagination。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了原生js和jquery分別實現橫向導航菜單效果的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-05-05
2008-02-02
本方法是基于iframe實現的，需求是form表單提交帶有文件上傳的input標簽，示例如下，感興趣的朋友可以參考下2014-05-05
在本篇文章里小編給大家分享的是關于javascript中的with語句學習筆記及用法，有需要的朋友們可以學習下。2020-02-02
深入了解JavaScript中l(wèi)et/var/function的變量提升
這篇文章主要介紹了深入了解JavaScript中l(wèi)et/var/function的變量提升，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的朋友可以參考一下2022-07-07
這篇文章主要介紹了webpack4 optimization使用總結，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
JavaScript 復制對象與Object.assign方法無法實現深復制
這篇文章主要介紹了JavaScript 復制對象與Object.assign方法無法實現深復制，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
利用NodeJS和PhantomJS抓取網站頁面信息以及網站截圖
這篇文章主要介紹了利用NodeJS和PhantomJS抓取網站頁面信息以及網站截圖的方法，提供實例代碼供大家參考2013-11-11
Javascript中關于Array.filter()的妙用詳解
大家應該都知道filter是Javascript中Array常用的操作，它用于把Array的某些元素過濾掉，然后返回剩下的元素。下面這篇文章就給大家介紹了關于Javascript中Array.filter()的妙用，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-12-12
JavaScript實現當網頁加載完成后執(zhí)行指定函數的方法
這篇文章主要介紹了JavaScript實現當網頁加載完成后執(zhí)行指定函數的方法,實例分析了javascript加載頁面及執(zhí)行函數的技巧,需要的朋友可以參考下2015-03-03