快捷導(dǎo)航

uniapp小程序?qū)崿F(xiàn)瀑布流布局的思路與代碼

更新時(shí)間：2021年04月08日 14:25:07 作者：林深鹿lv-1

這篇文章主要給大家介紹了關(guān)于uniapp小程序?qū)崿F(xiàn)瀑布流布局的思路與代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

一、前言

現(xiàn)在寫(xiě)瀑布流算不算是炒冷飯??？

我不管，我就要寫(xiě)，誰(shuí)也別想攔我。

瀑布流應(yīng)該算是很常見(jiàn)的一種布局方法了，大致的思路也很好理解，但是在小程序里面確有另外需要考慮的幾個(gè)問(wèn)題。

問(wèn)題1：uniapp是基于Vue的，所以不好直接操作DOM。

問(wèn)題2：uniapp基于Vue，但也做了一些修改，所以不好拿ref來(lái)操作

二、先說(shuō)思路

為了保證文章的長(zhǎng)度，以及有些小伙伴對(duì)瀑布流的基本思路不是很了解，所以先講講瀑布流的思路，先看下圖。

可以看到，商品的圖片高度是不一致的，再加上商品標(biāo)題的行數(shù)不一致，最終呈現(xiàn)的效果是交錯(cuò)排列的。

之前在開(kāi)發(fā)過(guò)程中，我也試過(guò)用CSS的Flex布局，Column布局來(lái)實(shí)現(xiàn)，勉強(qiáng)能實(shí)現(xiàn)同樣的效果，但是最終對(duì)接后臺(tái)要考慮商品的熱度優(yōu)先，所以只能放棄。

Flex實(shí)現(xiàn)缺點(diǎn)：使用Flex布局并不能準(zhǔn)確計(jì)算高度來(lái)插入商品。

Column實(shí)現(xiàn)缺點(diǎn)：使用Column布局不好操作先后順序。

PS：如果對(duì)產(chǎn)品排序沒(méi)有要求的話(huà)，可以考慮純CSS實(shí)現(xiàn)，這里不多贅述，掘金里很多的。

三、核心代碼

如題，本文對(duì)于瀑布流的實(shí)現(xiàn)是基于uniapp開(kāi)發(fā)小程序的，如果期望JS原生實(shí)現(xiàn)，本文的很多思路是需要修改的。
先解答部分疑惑：

因?yàn)闊o(wú)法通過(guò)$refs獲取到列的高度，所以代碼是通過(guò)Image標(biāo)簽的@load時(shí)間先加載一次圖片，并將圖片的寬高等信息傳遞給方法。

// component/waterfall.vue
<template>
    <view class="waterfall">
        <view hidden>
            // 用JS原生實(shí)現(xiàn)時(shí)可以直接用for循環(huán)插入，然后獲取列高度
            // 這里通過(guò)載入圖片調(diào)用方法， 默認(rèn)傳參帶有圖片信息，可以獲得圖片高度
            <block v-for(item in imgList" :key="item.id">
                <image :src="item.url" @load="loadImg" ></iamge>
            </block>
        </view>
        <view class="list" v-for="(list, key) in waterfall" :key="key">
            <navigator url="https://www.baidu.com" v-for="item in list.list" :key="item.id">
                <image :src="item.url" mode="widthFix"></image>
                <view class="shop-info">
                    /* 標(biāo)題等信息，略 */
                </view>
            </navigator>
        </view>
    </view>
</template>

<script>
    export default {
        // 抽出為單獨(dú)的組件，所以數(shù)據(jù)來(lái)源于父組件傳遞，也可以是當(dāng)前組件請(qǐng)求API
        props: { imgList: Array },
        data(){
            return {
                lists: [], // 備份imgList用的數(shù)組，方便操作
                waterfall: [
                    // 用于記錄當(dāng)前列的高度，不在方法中保存是為了上拉獲取新數(shù)據(jù)也能使用
                    // 因?yàn)槟J(rèn)手機(jī)顯示，可以固定兩列
                    // 如果是做自適應(yīng)或者電腦端多列，可以動(dòng)態(tài)插入實(shí)現(xiàn)多列
                    {
                        height: 0, 
                        list: []
                    },{
                        height: 0, 
                        list: []
                    }
                ]
            }
        },
        created(){
            this.lists = this.imgList; // Vue創(chuàng)建data后立即備份
        },
        watch(){
            // 監(jiān)聽(tīng)數(shù)據(jù)源，如果有新值傳入，則用lists數(shù)組備份
            imgList(data){ data.length && this.lists.push(...data); }
        },
        methods: {
            loadImg(ev){
                let Root = this.waterfall;
                let height = e.detail.height;
                // 根據(jù)當(dāng)前高度決定將新數(shù)據(jù)給誰(shuí)，并更新列高度；優(yōu)先插入左側(cè)
                if(Root[0].height <= Root[1].height){
                    // 考慮熱度優(yōu)先的問(wèn)題， 所以用的是shift()方法推出頭部數(shù)據(jù)。
                    Root[0].list.push(this.lists.shift())
                    Root[0].height += height;
                } else {
                    Root[1].list.push(this.lists.shift())
                    Root[1].height += height;
                }
            }
        }
    }
</script>

至此，核心代碼就完成了。