Shulou(Shulou.com)06/01 Report--

In this issue, the editor will bring you about how to implement a truncated waterfall flow component in Mini Program. The article is rich in content and analyzes and describes it from a professional point of view. I hope you can get something after reading this article.

Waterfall flow is a common layout, which can be implemented in many ways, such as dividing directly into two columns and then adding elements in the left and right columns; another way is to place both sides through absolute positioning.

The waterfall flow described below is different from the normal, because the middle of the waterfall flow may be truncated:

For the above layout, it is not appropriate to force it to be divided into two columns, so I use absolute positioning to lay out, because the height of the elements in the waterfall flow is not fixed. So I have to find a way to get the height of each element, and then determine whether the element is placed in a whole row, on the left, or on the right.

First, let's take a look at the implementation of the template part:

The template is relatively simple, a container container, and then loop the array, rendering a bunch of wrapper containers at the horizontal level.

The wrapper container is an absolutely positioned package element, and the components that need to be actually rendered need to be placed in the wrapper container. In order to be more flexible, I set this rendering component to a virtual node, and you can specify the custom components for the actual rendering when using the components.

Because the wrapper element is absolutely positioned, we need to maintain the height of the entire container container manually.

The question here is, how do we get the height of the elements inside? The computed-zone in the template is used to solve this problem. Before placing the element in the array, we render the element in computed-zone, and then obtain the actual rendering size of the element through WXML api, so that we can know the actual rendering width and height of the element.

After we have the render size information for each element, we need to confirm whether the element occupies the entire line or half:

If the rendering width of the element is the same as that of the container, you can judge that the element is covered with a whole line. You need to set the package container wrapper to the width of a whole line.

If condition 1 is not met, then you need to place the wrapper on the left or right based on the total height of the left and right elements.

After analysis, what needs to be written a little bit of logic is to calculate the offset of the wrapper, whether to put it on the left or the right, or to occupy the whole line. The core code implementation is as follows:

{/ / make setData Promise easy to use $setData (data) {return new Promise (resolve = > {this.setData (data, () = > {resolve ();});}) }, / / get the rendering size of the element getRect (item) {return this.$setData ({tmp: item,}). Then () = > {return new Promise ((resolve, reject) = > {const query = this.createSelectorQuery () / / be careful to use this instead of using the wx prefix query.select ('.computed-zone .wrapper') .boundingClientRect () Query.exec (ret = > {if (ret [0]) {resolve (ret [0])) } else {reject ('not found domination');}});});}) }, / / add elements, internally using addItem (item) {let tick = this.tick; return this.getRect (item) .then (rect = > {if (tick! = = this.tick) {return Promise.reject ('tick')) } const {margin} = this.data; let {height, width} = rect; const windowWidth = this.sysInfo.windowWidth; let [leftTotal, rightTotal] = this.height / / leftTotal left column height, rightTotal right column height, let marginPx = this.sysInfo.getPx (margin); let style =''; if (Math.abs (width-windowWidth))

< 3) { // 占满屏幕宽度 style = `left:0;top:${ Math.max(leftTotal, rightTotal) }px;width:100%;`; leftTotal = rightTotal = Math.max(leftTotal + height, rightTotal + height); } else if (rightTotal < leftTotal) { // 放入右边 style = `right:${ marginPx }px;top:${ rightTotal }px;`; rightTotal += height; } else { // 放入左边 style = `left:${ marginPx }px;top:${ leftTotal }px;`; leftTotal += height; } const { list = [] } = this.data; const targetKey = `list[${list.length}]`; // 利用直接操作数组下标的方式来触发数组修改，性能有很大提升 this.height = [leftTotal, rightTotal]; // 记录最新的左右侧高度 return this.$setData({ [targetKey]: { data: item, style, }, height: Math.max(leftTotal, rightTotal), }); }); }, // 实际添加元素使用，自建Promise队列，保证顺序一致 add(item) { let pending = this.pending || Promise.resolve(); return this.pending = pending.then(() =>

{return this.addItem (item);}) .catch (err = > {console.error (err); this.pending = null; throw err;});}, clear () {this.tick = tick++ This.height = [0,0]; this.pending = null; this.setData ({list: [], height: 0,});},}

When using this component, we can't render elements directly by assigning arrays, but through the component instance method add (item), because I implement the queue, so I can loop add directly. If you care about the state, you can determine whether the add operation of the last element is complete.

The waterfall achieved in this way is relatively active, but the performance consumption is not low. You need to get the actual rendering size of the elements one by one. If you want to support the resize of the window, the consumption is scary.

For those of you who need to see the code details, I put the actual demo in the Github and Wechat code snippets.

The above is the editor for you to share how to achieve a truncated waterfall flow component in Mini Program, if you happen to have similar doubts, please refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.