Ideas and codes for implementing waterfall flow layout in uniapp applet

1. Introduction

Is it considered rehashing old stuff to write about waterfall flow now?

I don't care, I'm going to write and no one can stop me.

The waterfall flow should be considered a very common layout method, and the general idea is easy to understand, but there are indeed several other issues that need to be considered in the mini program.

Question 1: uniapp is based on Vue, so it is not easy to directly operate DOM.

Question 2: Uniapp is based on Vue, but some modifications have been made, so it is not easy to use ref to operate

Second, let’s talk about the idea first

In order to ensure the length of the article and some friends are not very familiar with the basic idea of ​​waterfall flow, let’s talk about the idea of ​​waterfall flow first. Let’s look at the picture below.

It can be seen that the heights of the product images are inconsistent, and the number of lines in the product titles is inconsistent, so the final effect is a staggered arrangement.

Previously in the development process, I also tried to use CSS Flex layout and Column layout to achieve it, and I could barely achieve the same effect, but in the end, when connecting to the backend, I had to prioritize the popularity of the product, so I had to give up.

Disadvantages of Flex implementation: Using Flex layout cannot accurately calculate the height to insert products.

Disadvantages of Column implementation: It is not easy to operate the sequence when using Column layout.

PS: If there is no requirement for product sorting, you can consider pure CSS implementation. I won’t go into details here, there are many in Nuggets.

3. Core Code

As the title says, the implementation of waterfall flow in this article is based on the mini program developed by uniapp. If you expect native JS implementation, many ideas in this article need to be modified.
Let me answer some questions first:

Because the column height cannot be obtained through $refs, the code first loads the image once through the @load time of the Image tag and passes the image's width, height and other information to the method.

// component/waterfall.vue
<template>
    <view class="waterfall">
        <view hidden>
            // When using JS native implementation, you can directly use the for loop to insert and then get the column height // Here, the method is called by loading the image. The default parameter carries the image information, and the image height can be obtained <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">
                    /*Title and other information, omitted*/
                </view>
            </navigator>
        </view>
    </view>
</template>

<script>
    export default {
        // Extracted as a separate component, so the data comes from the parent component, or the current component requests the API
        props: { imgList: Array },
        data(){
            return {
                lists: [], // Array used to back up imgList for easy operation waterfall: [
                    // Used to record the height of the current column. It is not saved in the method so that it can be used to pull up and get new data. // Because the default mobile phone display can be fixed to two columns. // If it is adaptive or multi-column on the computer, you can dynamically insert multiple columns.
                        height: 0, 
                        list: []
                    },{
                        height: 0, 
                        list: []
                    }
                ]
            }
        },
        created(){
            this.lists = this.imgList; // Vue creates data and backs it up immediately},
        watch(){
            // Listen to the data source. If a new value is passed in, back it up with the lists array. imgList(data){ data.length && this.lists.push(...data); }
        },
        methods: {
            loadImg(ev){
                let Root = this.waterfall;
                let height = e.detail.height;
                //Determine who the new data is given to based on the current height and update the column height; insert the left side first if (Root[0].height <= Root[1].height){
                    // Considering the issue of heat priority, the shift() method is used to push out the header data.
                    Root[0].list.push(this.lists.shift())
                    Root[0].height += height;
                } else {
                    Root[1].list.push(this.lists.shift())
                    Root[1].height += height;
                }
            }
        }
    }
</script>

At this point, the core code is complete.

PS: Because the method is triggered by the @load event of the image, large-scale loading is bound to affect performance, so you have to make some trade-offs yourself.

IV. Conclusion

I hope that if anyone reads this article and decides to use this method, they can remember one thing: this writing method may have an impact on performance issues, and they can work hard to study this aspect in depth.

This concludes this article about the ideas and codes for implementing the waterfall flow layout of the uniapp applet. For more relevant content on the waterfall flow layout of the uniapp applet, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!