微信小程序瀑布流布局實現技巧

微信小程序瀑布流布局可以讓我們在展示圖片、商品等方面有更豐富的呈現方式。本文將從選取圖片源、圖片寬度處理、動態設置頁面高度、滾動加載等幾個方面為大家介紹微信小程序瀑布流布局的實現技巧。

一、選取圖片源

在實現瀑布流布局時，必不可少的要素就是選取響應式圖片。我們可以通過API調用網絡上的圖片，也可以在本地保存一定規格比例的圖片，這樣利用CSS設置大小可以自適應各種尺寸。舉個例子，從淘寶開放平台接口調用商品信息，我們需要獲取到每個商品的信息，其中最重要的信息就是商品圖片的鏈接。根據鏈接我們可以抓取圖片生成響應式圖片，以最大程度上提高圖片加載速度，提高用戶體驗。

下面是微信小程序使用API獲取網絡圖片的實現代碼：

“`
wx.downloadFile({
url: ‘https://example.com/圖片鏈接’,
success: function (res) {
if (res.statusCode === 200) {
console.log(‘下載圖片成功’)
return res.tempFilePaths
}
console.log(‘下載圖片失敗’)
}
})
“`

二、圖片寬度處理

在瀑布流布局中，每個圖片的寬度要需要保持一致，而高度是根據圖片的實際高度自動計算。因此在處理寬度時，需要考慮到圖片的數量不一定是偶數，需要在保持寬度一致的情況下，讓左右兩側的圖片寬度比較接近，最好不要出現左邊很窄，右邊很寬的情況。

下面是圖片寬度處理的示例代碼:

“`
const screenWidth = wx.getSystemInfoSync().screenWidth;// 獲取屏幕寬度
const styleList = []
const widths = [100, 200, 300, 400]// 定義瀑布流每個item的寬度，這裡取4個不同大小的寬度值

for (let i = 0; i < 50; i++) {// 在循環中計算每個item的寬度和位置
let tempStyle = ''
if (i % 2 === 0) {
const width = widths[Math.floor(Math.random() * widths.length)]
tempStyle = `width: ${width}px;position: absolute;left: ${i % 2 === 0 ? screenWidth / 2 – width / 2 : screenWidth / 2}px;top: ${i / 2 * 200}px;`
} else {
const width = widths[Math.floor(Math.random() * widths.length – 1) + 1]
tempStyle = `width: ${width}px;position: absolute;left: ${i % 2 === 0 ? screenWidth / 2 : screenWidth / 2 – width / 2}px;top: ${Math.ceil(i / 2 – 1) * 200}px;`
}
styleList.push(tempStyle)
}
console.log(styleList)
“`

三、動態設置頁面高度

瀑布流布局中，需要根據圖片高度動態設置頁面高度，避免出現空白或者重疊的情況。通過遍歷圖片高度獲取每一列的高度，再取出高度最大的那一列作為頁面高度。

下面是動態設置頁面高度的示例代碼：

“`
let heightList = []
let column = 3
let index = 0
for (let i = 0; i {
heightList[index] = heightList[index] ? heightList[index] + res.height : res.height

if (i === 49) {//最後一個元素，循環結束後設置頁面高度
let max = heightList[0]
for (let j = 0; j max) {
max = heightList[j]
}
}
let scrollTop = e.detail.scrollTop
this.setData({
scrollTop: scrollTop,
pageHeight: max * (Math.ceil(i / column))
})
}

if ((i + 1) % column === 0) {
index = 0
} else {
index++
}
}).exec()
}
“`

四、滾動加載

雖然瀑布流布局可以在頁面上優美地展示出圖片，但是由於圖片的數量可能會很多，一次性全部加載也容易導致頁面卡頓，甚至崩潰。因此採用滾動加載的方式，讓用戶在滾動頁面到底部時再加載部分圖片，這樣就不會一下子把所有圖片都加載出來。

下面是滾動加載的示例代碼：

“`
onPageScroll: function (e) {
const scrollTop = e.scrollTop
const windowHeight = wx.getSystemInfoSync().windowHeight
const pageHeight = this.data.pageHeight
if (scrollTop + windowHeight > pageHeight – 5) {//滾動到底部時，設置isLoadMore為true，加載新數據
if (!this.data.isLoadMore && this.data.hasMoreData) {
this.setData({
isLoadMore: true
})
wx.showLoading({
title: ‘加載中’
})
setTimeout(() => {
this.setData({
isLoadMore: false,
list: this.data.list.concat([{ url: ‘https://example.com/新的圖片鏈接’ }])// 這裡添加新圖片地址，可以結合API實現
})
wx.hideLoading()
}, 2000)
}
}
}
“`

至此，我們通過選取圖片源、圖片寬度處理、動態設置頁面高度、滾動加載等方面為大家介紹了微信小程序瀑布流布局的實現技巧，希望對大家有所幫助。