亲宝软件园·资讯

展开

uniapp小程序瀑布流布局 uniapp小程序实现瀑布流布局的思路与代码

林深鹿lv-1 人气:2
想了解uniapp小程序实现瀑布流布局的思路与代码的相关内容吗,林深鹿lv-1在本文为您仔细讲解uniapp小程序瀑布流布局的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:小程序瀑布流布局,微信小程序布局技巧,微信小程序无限加载,下面大家一起来学习吧。

一、前言

现在写瀑布流算不算是炒冷饭啊?

我不管, 我就要写,谁也别想拦我。

瀑布流应该算是很常见的一种布局方法了,大致的思路也很好理解, 但是在小程序里面确有另外需要考虑的几个问题。

问题1:uniapp是基于Vue的,所以不好直接操作DOM。

问题2:uniapp基于Vue,但也做了一些修改,所以不好拿ref来操作

二、先说思路

为了保证文章的长度,以及有些小伙伴对瀑布流的基本思路不是很了解,所以先讲讲瀑布流的思路,先看下图。

可以看到,商品的图片高度是不一致的,再加上商品标题的行数不一致,最终呈现的效果是交错排列的。

之前在开发过程中,我也试过用CSS的Flex布局,Column布局来实现,勉强能实现同样的效果,但是最终对接后台要考虑商品的热度优先,所以只能放弃。

Flex实现缺点:使用Flex布局并不能准确计算高度来插入商品。

Column实现缺点:使用Column布局不好操作先后顺序。

PS:如果对产品排序没有要求的话, 可以考虑纯CSS实现,这里不多赘述,掘金里很多的。

三、核心代码

如题,本文对于瀑布流的实现是基于uniapp开发小程序的,如果期望JS原生实现,本文的很多思路是需要修改的。
先解答部分疑惑:

因为无法通过$refs获取到列的高度,所以代码是通过Image标签的@load时间先加载一次图片,并将图片的宽高等信息传递给方法。

// component/waterfall.vue
<template>
    <view class="waterfall">
        <view hidden>
            // 用JS原生实现时可以直接用for循环插入,然后获取列高度
            // 这里通过载入图片调用方法, 默认传参带有图片信息,可以获得图片高度
            <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">
                    /* 标题等信息,略 */
                </view>
            </navigator>
        </view>
    </view>
</template>

<script>
    export default {
        // 抽出为单独的组件,所以数据来源于父组件传递,也可以是当前组件请求API
        props: { imgList: Array },
        data(){
            return {
                lists: [], // 备份imgList用的数组,方便操作
                waterfall: [
                    // 用于记录当前列的高度,不在方法中保存是为了上拉获取新数据也能使用
                    // 因为默认手机显示,可以固定两列
                    // 如果是做自适应或者电脑端多列,可以动态插入实现多列
                    {
                        height: 0, 
                        list: []
                    },{
                        height: 0, 
                        list: []
                    }
                ]
            }
        },
        created(){
            this.lists = this.imgList; // Vue创建data后立即备份
        },
        watch(){
            // 监听数据源,如果有新值传入,则用lists数组备份
            imgList(data){ data.length && this.lists.push(...data); }
        },
        methods: {
            loadImg(ev){
                let Root = this.waterfall;
                let height = e.detail.height;
                // 根据当前高度决定将新数据给谁,并更新列高度;优先插入左侧
                if(Root[0].height <= Root[1].height){
                    // 考虑热度优先的问题, 所以用的是shift()方法推出头部数据。
                    Root[0].list.push(this.lists.shift())
                    Root[0].height += height;
                } else {
                    Root[1].list.push(this.lists.shift())
                    Root[1].height += height;
                }
            }
        }
    }
</script>

至此,核心代码就完成了。

PS:因为要借由image的@load事件来触发方法,所以大量加载势必会影响性能,所以要自己做点取舍了。

四、总结

希望如果有小伙伴看完这篇文章之后,决定使用这个方法时,能记得一件事,这个写法可能有性能问题方面的影响,能在这方面下功夫去深入研究下。

加载全部内容

相关教程
猜你喜欢
用户评论