網(wǎng)上能搜到的小程序瀑布流解決方案,要么代碼復(fù)雜、邏輯混亂,要么實(shí)現(xiàn)不了業(yè)務(wù)功能,所以把項(xiàng)目中的實(shí)現(xiàn)方案給大家分享下。
最簡單的實(shí)現(xiàn)方案,不適用有分頁的場景。
這個方案簡單的原因是因?yàn)閮H僅使用了css的屬性。
使用column-count 屬性可以指定頁面顯示的列數(shù),一般瀑布流都是2列,所以可以定義class
.list-masonry {
column-count: 2; //2列
column-gap: 20rpx; //列間距
}
注意,瀑布流的卡片需要css屬性 display: inline-block; 將卡片設(shè)置為 內(nèi)聯(lián)元素。image 組件設(shè)置縮放模式 mode=widthFix 來保持圖片寬高比。
column-count 屬性默認(rèn)是以列的形式來填充數(shù)據(jù)的。比如我們有20條數(shù)據(jù),1 ~ 10 條數(shù)據(jù)會展示在左邊第一列,11 ~ 20 條數(shù)據(jù)會展示在第二列。
如果有分頁,再往數(shù)組中增加20條數(shù)據(jù)后,就會變成 1 ~ 20 條數(shù)據(jù)會在左邊,21 ~ 40 條數(shù)據(jù)會展示在右邊。用戶體驗(yàn)非常差。
由于 column-fill: balance; 填充屬性無效,無法指定填充順序?yàn)樾械男问健?nbsp;
所以這種實(shí)現(xiàn)方案只能一下加載完所有數(shù)據(jù),不適用于分頁。
Component實(shí)現(xiàn)瀑布流,功能強(qiáng)大,滑動流暢
通過自定義組件,用自己的思路實(shí)現(xiàn)瀑布流。然后在需要瀑布流的地方直接調(diào)用,方便復(fù)用。
沒有Demo!! 跟著我的步驟一步一步來,就能輕松實(shí)現(xiàn)。
1.首先創(chuàng)建瀑布流自定義組件文件。
建議在項(xiàng)目根目錄創(chuàng)建文件夾component,然后在該目錄下創(chuàng)建文件夾WaterFallView,最后在WaterFallView下創(chuàng)建component。(鼠標(biāo)右鍵->新建->Component)。
2.設(shè)計(jì)瀑布流的wxml。
瀑布流的結(jié)構(gòu)簡單,只有左右2列。所以在設(shè)計(jì)UI的時候,布局很簡單。
左右兩邊,一邊一個View。通過這兩個View 來展示瀑布流的兩列。每個View對應(yīng)一個數(shù)據(jù)源,由此可見,這套思路的重點(diǎn)是這個兩個數(shù)據(jù)源的處理。每個View中的template 為瀑布流中的卡片,就不介紹了。
超過兩列的瀑布流比較少見,本篇不考慮,但可用本篇的思路來實(shí)現(xiàn)。
css樣式
具體實(shí)現(xiàn)邏輯
根據(jù)上面的 wxml 結(jié)構(gòu),這個組件的核心邏輯就是如何把要展示的數(shù)據(jù)item 放入leftList、rightList這兩個數(shù)組中。
如何分配數(shù)據(jù)item?這個簡單,我們可以定義2個變量 leftHight、rightHight,來分別記錄leftList、rightList數(shù)組中圖片的高度(可以理解為左邊View、右邊View的高度,其實(shí)只是圖片的高度,但已滿足瀑布流的的需求)。當(dāng)leftHight 大于 rightHight時,把數(shù)據(jù)放入rightList,并讓rightHight疊加數(shù)據(jù)中圖片的高度。當(dāng)rightHight大于 leftHight 時,把數(shù)據(jù)放入leftList,并讓leftHight 疊加數(shù)據(jù)中圖片的高度。
if (leftHight == rightHight) { //第1個item放左邊
leftList.push(tmp);
leftHight = leftHight + tmp.itemHeight;
} else if (leftHight < rightHight) {
leftList.push(tmp);
leftHight = leftHight + tmp.itemHeight;
} else {
rightList.push(tmp);
rightHight = rightHight + tmp.itemHeight;
}
瀑布流展示圖片的時候,需要知道圖片的寬高,然后根據(jù)圖片的寬高比來設(shè)置 image組件的寬高。所以如果你們的數(shù)據(jù)沒有寬高或?qū)捀弑?,很難實(shí)現(xiàn)瀑布流。雖然可以通過代碼獲得圖片寬高,但會對性能以及用戶體驗(yàn)有很大影響,不推薦這么做。可以和后臺同學(xué)商量下,看如何加上寬高數(shù)據(jù)。
Component有自己生命周期方法,甚至可以象Page一樣,當(dāng)做一個單獨(dú)的頁面使用??梢栽谒纳芷诜椒ㄖ蝎@得到瀑布流的寬度,以及圖片的最大高度。
拿到瀑布流的寬度后,就可以根據(jù)圖片的寬高比,計(jì)算出 image 組件的寬高。
在template中,image的寬高需要聲明下。單位是px,不是rpx
1.使用瀑布流
a. 注冊自定義組件
在使用自定義組件的Page的json文件中聲明要使用的組件
{ .... usingComponents: { waterFallView: ../../component/WaterFallView/WaterFallView } }
b. 在 wxml 中添加組件,并加上 id
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)