小程序瀑布流組件實現(xiàn)翻頁與圖片懶加載
電商小程序中，用到瀑布流的地方非常多，每次都寫一個瀑布流，重復(fù)一次邏輯，作為程序員，肯定是非常不愿意的。
瀑布流的形式都是大同小異，不同的是瀑布流中每個模塊的內(nèi)容，隨業(yè)務(wù)而變化。
所以，我們把瀑布流框架抽象成組件，瀑布流的內(nèi)容由業(yè)務(wù)確定。這樣即可實現(xiàn)組件化和自定義的最大平衡，微信小程序組件源碼。
首先，我們來看一下瀑布流組件在實際項目中的實際效果。
1 實際效果
瀑布流組件實際效果如下圖所示，左側(cè)為用戶交互效果，右側(cè)為圖片懶加載實際效果。
2 什么是瀑布流？
瀑布流，又稱瀑布流式布局。是比較流行的一種網(wǎng)站頁面布局，waterfall-item寬度固定，高度不定，視覺表現(xiàn)為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部。如下圖所示:
3 實現(xiàn)功能
該瀑布流組件實現(xiàn)了以下幾個功能：
- 支持圖片懶加載
- 支持上拉數(shù)據(jù)翻頁
- 支持自定義樣式
- 支持瀑布流Item間隔底層自動計算
- 原生組件模式：即類swiper和swiper-item 組件用法
- 組件與數(shù)據(jù)完全解耦
4 實現(xiàn)原理
4.1 waterfall 和waterfall-item實現(xiàn)原理
第一步：在 waterfall-layout 目錄下創(chuàng)建 waterfall 和 waterfall-item 組件，目錄結(jié)構(gòu)如下：
. ├── query-node.js ├── waterfall-item.js ├── waterfall-item.json ├── waterfall-item.wxml ├── waterfall-item.wxss ├── waterfall.js ├── waterfall.json ├── waterfall.wxml └── waterfall.wxss
第二步：分別在waterfall.js 和 waterfall-item.js的relations選項中指定組件父、子級關(guān)系：
// waterfall.js
Component({
// ... other code
relations: {
'./waterfall-item': {
type: 'child',
},
// ... other code
}
})
// waterfall-item.js
Component({
// ... other code
relations: {
'././waterfall': {
type: 'parent',
},
// ... other code
}
})
指定彼此的父、子組件的關(guān)系后，即可通過 this.getRelationNodes 原生 API，就能訪問彼此實例對象及其屬性和方法。
第三步：實現(xiàn)waterfall.wxml 和 waterfall-item.wxml代碼：
waterfall.wxml代碼實現(xiàn)非常簡單，只有5行代碼：
<view class="waterfall custom-class"> <view class="waterfall-inner"> <slot ></slot> </view> </view>
同樣，waterfall-item.wxml代碼實現(xiàn)也非常簡單，只有5行代碼：
<view
class="waterfall-item custom-class"
style="{{position}}:0;top:{{(top >= 0 ? top + 'px' : 0 + 'rpx')}};"
>
<slot ></slot>
</view>
不知道slot用法的童鞋，請參考微信小程序自定義組件模板和樣式文檔。
4.2 瀑布流原理
其實，不管是微信小程序、web、還是原生APP，瀑布流的實現(xiàn)原理都是一樣的。都可以絕對定位和位置計算來實現(xiàn)。
瀑布流的大體過程如下圖所示：
第一步：數(shù)據(jù)通過this.setData從邏輯層傳輸?shù)揭晥D層，進(jìn)行第一渲染，由于每個waterfall-item 的top:0; 和 position:left;，所以都重疊了在一起。
第二步：通過節(jié)點查詢API獲取每個waterfall-item元素信息，并且計算出正確的top和position值。
第三步：setData每個waterfall-item的top和position，實現(xiàn)重排。
具體邏輯實現(xiàn)如下：
首先，我們來實現(xiàn)一個節(jié)點查詢API querySelector，之后會用到：
// query-node.js
/**
* 獲取當(dāng)前頁面中，選擇器為 selector 的第一個node節(jié)點
* @param {String} selector 符合微信小程序規(guī)范的選擇器
* @param {Object} context 調(diào)用環(huán)境，普通頁面中為wx，自定義組件中為this；默認(rèn)值為wx.
* @return {Array} 返回一個數(shù)組，第一個元素為 node 節(jié)點
*/
export const querySelector = function (selector, context = wx) {
return new Promise((resolve, reject) => {
context.createSelectorQuery()
.select(selector)
.boundingClientRect((res) => {
if (res) {
resolve(res);
} else {
reject(`不存在選擇器為 ${selector} 的節(jié)點`);
}
})
.exec();
})
};
接著，看一下組件waterfall 和waterfall-item在實際項目中的用法：
<waterfall
loading="{{loadMorePending}}"
isAllLoaded="{{isAllLoaded}}"
>
<block wx:for="{{data.sections}}" wx:key="id" wx:for-item="product">
<waterfall-item
index="{{index}}"
custom-class="flow-item-wrapper"
>
<view class="product-item">
業(yè)務(wù)代碼
</view>
</waterfall-item>
</block>
</waterfall>
當(dāng)?shù)谝粋€waterfall-item組件，在視圖層布局完成后會執(zhí)行ready生命周期鉤子。
在 ready 生命周期鉤子中，我們需要做兩件事：
- 獲取父組件
waterfall的實例對象，并掛載在waterfall-item組件的this實例對象上。因為之后我們需要在waterfall-item組件中修改waterfall上的數(shù)據(jù)。 - 獲取
waterfall-item組件的高度，計算waterfall-item組件的位置信息top和position。
// waterfall-item.js
import { querySelector } from './query-node';
Component({
// ... other code
lifetimes: {
ready() {
const [waterfall] = this.getRelationNodes('./waterfall');
this.parent = waterfall;
this.setWaterfallItemPosition();
},
}
methods:{
async setWaterfallItemPosition() {
querySelector('.waterfall-item', this)
.then(async (node) => {
const { top, position } = await this.parent.getWaterfallItemPostionInfo(node);
this.setData({
top,
position
})
})
},
}
// ... other code
})
在setWaterfallItemPosition方法中，我們調(diào)用了父組件上的方法this.parent.getWaterfallItemPostionInfo，獲取當(dāng)前waterfall-item組件的top和position信息。并把已經(jīng)渲染好的waterfall-item組件的累計高度緩存在waterfall的leftHeights和rightHeights屬性上，用于計算下一個waterfall-item組件位置，主要邏輯如下：
// waterfall.js
const POSITION_LEFT = 'left';
const POSITION_RIGHT = 'right';
Component({
// ... other code
/**
* 組件的方法列表
*/
methods: {
lifetimes: {
ready() {
this.initParams();
}
},
initParams() {
this.leftHeights = 0;
this.rightHeights = 0;
},
/**
* 設(shè)置 waterfall-item 的高度值
* @param {Object} node waterfall-item 組件位置尺寸數(shù)據(jù)
*/
async getWaterfallItemPostionInfo(node) {
let top = 0;
let position = POSITION_LEFT;
const { height } = node;
const { itemGap } = this;
if (this.leftHeights <= this.rightHeights) {
top = this.leftHeights;
if(this.leftHeights === 0) {
this.leftHeights += height;
} else {
top += itemGap;
this.leftHeights += (height + itemGap);
}
} else {
position = POSITION_RIGHT;
top = this.rightHeights;
if(this.rightHeights === 0) {
this.rightHeights += height;
} else {
top += itemGap;
this.rightHeights += (height + itemGap);
}
}
return {
top,
position,
}
}
// ... other code
}
})
當(dāng)所有的waterfall-item重排結(jié)束后，瀑布流渲染完成。
4.3 圖片懶加載原理
微信小程序中，<image>標(biāo)簽本身是支持懶加載的，當(dāng)lazy-load={{true}}，且在即將進(jìn)入一定范圍（上下三屏）時才開始加載。
也就是說，當(dāng)lazy-load={{true}}，<image>標(biāo)簽初次渲染在視口上下三屏之外時，是不會請求圖片資源的，當(dāng)<image>即將進(jìn)入三屏之內(nèi)時，才會加載。
在4.2小節(jié)的圖3中，<waterfall-item>的初始化位置設(shè)置成了top:0; 和 position:left;，所以，都在視口中。如果將top的值成三屏之外的數(shù)值，例如，400vh或者更大，則<waterfall-item>重排之后，任然在三屏之外的圖片即會自動懶加載。
<view
class="waterfall-item custom-class"
style="{{position}}:0;top:{{(top >= 0 ? top + 'px' : itemCount * 100 + 'vh')}};"
>
<slot ></slot>
</view>
Component({
// waterfall-item.js
// ... other code
lifetimes: {
ready() {
const { itemCount } = this.data;
const [waterfall] = this.getRelationNodes('./waterfall');
waterfall.childCount += 1;
this.parent = waterfall;
this.setData({
itemCount: itemCount + waterfall.childCount,
})
},
},
// ... other code
})
4.4 數(shù)據(jù)翻頁
因為實現(xiàn)了wx:for <waterfall-item>功能，和<swiper-item>組件一樣，因此翻頁邏輯完全由用戶自己定制，<waterfall>和<waterfall-item>只給你提供翻頁的功能，組件就可以和瀑布流數(shù)據(jù)結(jié)構(gòu)完全解耦。
4.5 瀑布流Item間隔底層自動計算
將列和行中，兩個<waterfall-item>組件之間的距離定義為itemGap，則:
itemGap = waterfall寬度 - （waterfall-item寬度 * 2）
在<waterfall> 的ready鉤子中，可以獲取到<waterfall>組件的寬度；同理，在<waterfall-item>的ready鉤子中，可以獲取到<waterfall-item>組件的寬度。
在調(diào)用getWaterfallItemPostionInfo之前，獲取到itemGap的值即可。這樣，在計算<waterfall-item>的top值時，除了第一行的<waterfall-item>的top值等于0之外，其他所有<waterfall-item>的top值等于：
// this.leftHeights += height + itemGap; // or // this.rightHeights += height + itemGap;
具體代碼實現(xiàn)請查看源碼
5 總結(jié)
通過瀑布流框架抽象，使<waterfall>和<waterfall-item>接近原生組件使用體驗，同時使組件與數(shù)據(jù)完全解耦。通過巧妙的初始化位置top設(shè)置，使瀑布流具圖片有懶加載的功能。
到此這篇關(guān)于小程序瀑布流組件實現(xiàn)翻頁與圖片懶加載的文章就介紹到這了,更多相關(guān)小程序瀑布流內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript中使用參數(shù)個數(shù)實現(xiàn)重載功能
這篇文章主要介紹了JavaScript中使用參數(shù)個數(shù)實現(xiàn)重載功能,需要的朋友可以參考下2017-09-09
這篇文章主要為大家詳細(xì)介紹了用js控制電燈開關(guān)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
JS實現(xiàn)自定義簡單網(wǎng)頁軟鍵盤效果代碼
這篇文章主要介紹了JS實現(xiàn)自定義簡單網(wǎng)頁軟鍵盤效果代碼,可實現(xiàn)簡單模擬鍵盤布局及響應(yīng)鼠標(biāo)點擊按下鍵盤按鍵功能,簡單實用,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
實用Javascript調(diào)試技巧分享(小結(jié))
這篇文章主要介紹了實用Javascript調(diào)試技巧分享(小結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06
這篇文章主要介紹了JS淺拷貝和深拷貝原理與實現(xiàn)方法,結(jié)合實例形式分析了javascript淺拷貝及深拷貝相關(guān)概念、原理、實現(xiàn)方法與操作注意事項,需要的朋友可以參考下2019-02-02
JavaScript計算字符串中每個字符出現(xiàn)次數(shù)的小例子
這篇文章介紹了在JS中計算字符串中每個字符出現(xiàn)的次數(shù)，有需要的朋友可以參考一下2013-07-07
layui實現(xiàn)顯示數(shù)據(jù)表格、搜索和修改功能示例
這篇文章主要介紹了layui實現(xiàn)顯示數(shù)據(jù)表格、搜索和修改功能,結(jié)合實例形式分析了layui顯示數(shù)據(jù)表格、搜索和修改功能具體界面布局、功能實現(xiàn)相關(guān)操作技巧,需要的朋友可以參考下2020-06-06
當(dāng)前世界上有很多種瀏覽器，除了我們熟知的IE, Firefox, Opera, Safari四大瀏覽器之外，世界上還有近百種瀏覽器，有時候我們需要判斷瀏覽器與版本方便后續(xù)的操作，一句話瀏覽器的兼容性太差了，缺少標(biāo)準(zhǔn)2014-05-05
這篇文章主要為大家詳細(xì)介紹了js彈性勢能動畫之拋物線運(yùn)動的制作方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了JavaScript定義類和對象的方法,分別以函數(shù)方式與Object類方式實現(xiàn),是javascript非常重要的技巧,需要的朋友可以參考下2014-11-11