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

This article introduces the relevant knowledge of "how to realize WeChat Mini Programs Waterfall flow". In the operation of actual cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The simplest implementation is not suitable for paging scenarios.

The reason for this scheme is simple because only the properties of css are used. Use the column-count property to specify the number of columns displayed on the page. Generally, waterfall flows have 2 columns, so you can define class.

.list-masonry {column-count: 2; / 2 column column-gap: 20rpx; / / column spacing}

The interface definition is also very simple.

Among them, the data displayed by goodsList for the page, and the goodsCard as a waterfall flow card, this is easy to understand.

Note that the card for the waterfall flow requires the css attribute display: inline-block; to set the card as an inline element. The image component sets the zoom mode mode= "widthFix" to maintain the aspect ratio of the picture.

The column-count property populates the data in the form of columns by default. For example, we have 20 pieces of data, 1-10 pieces of data will be displayed in the first column on the left, and 11-20 pieces of data will be displayed in the second column. If there is paging, after adding 20 pieces of data to the array, it will become 1-20 pieces of data will be on the left, 21-40 pieces of data will be displayed on the right. The user experience is very poor. The fill order cannot be specified in the form of rows because the column-fill: balance; fill property is invalid. Therefore, this implementation scheme can only load all the data at once and is not suitable for paging. Component realizes waterfall flow, powerful function and smooth sliding.

Through custom components, use your own ideas to achieve waterfall flow. Then it is called directly where the waterfall flow is needed to facilitate reuse.

No Demographies! Follow my steps step by step, and it will be easy to achieve.

First create a waterfall flow custom component file.

It is recommended that you create a folder component in the root directory of the project, then create a folder WaterFallView under that directory, and finally create a component under WaterFallView. (right mouse button-> New-> Component).

two。 Design wxml for waterfall flow.

The structure of the waterfall flow is simple, with only two columns on the left and right. So when designing UI, the layout is very simple.

On the left and right sides, one View on one side. Use these two View to show the two columns of the waterfall flow. Each View corresponds to a data source, so it can be seen that the focus of this set of ideas is the processing of these two data sources. The template in each View is a card in the waterfall stream and is not introduced. Waterfall flows of more than two columns are relatively rare, which are not considered in this article, but can be realized with the ideas of this article.

Css style

.fall-container {width: 100%; display: flex;}. Fall-left {display: flex; flex-direction: column;}. Fall-right {display: flex; flex-direction: column; margin-left: 20rpx;}

Concrete implementation logic

According to the wxml structure above, the core logic of this component is how to put the data item to be displayed into the leftList and rightList arrays.

How to allocate data item? This is simple, we can define two variables leftHight, rightHight, respectively, to record the height of the picture in the leftList and rightList array (it can be understood as the height of the left View and the right View, in fact, it is only the height of the picture, but it has met the needs of the waterfall flow). When leftHight is greater than rightHight, put the data into rightList and let rightHight overlay the height of the image in the data. When rightHight is greater than leftHight, put the data into leftList and let leftHight overlay the height of the image in the data.

If (leftHight = = rightHight) {/ / the first item on the left 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;} 瀑布流展示图片的时候，需要知道图片的宽高，然后根据图片的宽高比来设置 image组件的宽高。所以如果你们的数据没有宽高或宽高比，很难实现瀑布流。虽然可以通过代码获得图片宽高，但会对性能以及用户体验有很大影响，不推荐这么做。可以和后台同学商量下，看如何加上宽高数据。 Component有自己生命周期方法，甚至可以象Page一样，当做一个单独的页面使用。可以在他的生命周期方法中获得到瀑布流的宽度，以及图片的最大高度。 attached: function () { //第一个生命周期方法 wx.getSystemInfo({ success: (res) =>

{let percentage = / res.windowWidth; / / 750rpx/ screen width let margin = 20 / percentage; / / calculate the waterfall flow spacing itemWidth = (waterfall-margin) / 2; / / calculate the width of the waterfall flow display maxHeight = itemWidth / 0.8 / / calculate the maximum height of the waterfall flow to prevent the long picture from dominating the screen}};}

Once you get the width of the waterfall flow, you can calculate the width and height of the image component based on the aspect ratio of the image.

Let tmp = listData [I]; / single data tmp.width = parseInt (tmp.width); / / Picture width tmp.height = parseInt (tmp.height); / / Picture height tmp.itemWidth = itemWidth / / image width let per = tmp.width / tmp.itemWidth; / / Picture aspect ratio tmp.itemHeight = tmp.height / per; / / image height if (tmp.itemHeight > maxHeight) {tmp.itemHeight = maxHeight; / / image height, not exceeding the maximum height}

In template, the width and height of image need to be declared. The unit is px, not rpx

All JS codes

/ * Waterfall flow component * / var leftList = new Array (); / / left set var rightList = new Array (); / / right set var leftHight = 0, rightHight = 0, itemWidth = 0, maxHeight = 0 Component ({properties: {}, data: {leftList: [], / left collection rightList: [], / / right collection}, attached: function () {wx.getSystemInfo ({success: (res) = > {let percentage = 750 / res.windowWidth; let margin = 20 / percentage; itemWidth = (res.windowWidth-margin) / 2; maxHeight = itemWidth / 0.8}})) }, methods: {/ * populated data * / fillData: function (isPull, listData) {if (isPull) {/ / whether to drop down and refresh, if yes, clear the previous data leftList.length = 0; rightList.length = 0; leftHight = 0; rightHight = 0;} for (let I = 0, len = listData.length; I)

< len; i++) { let tmp = listData[i]; tmp.width = parseInt(tmp.width); tmp.height = parseInt(tmp.height); tmp.itemWidth = itemWidth let per = tmp.width / tmp.itemWidth; tmp.itemHeight = tmp.height / per; if (tmp.itemHeight >

MaxHeight) {tmp.itemHeight = maxHeight;} if (leftHight = = rightHight) {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 } this.setData ({leftList: leftList, rightList: rightList,});},})

Use waterfall flow

a. Register a custom component to declare the component to be used in the json file of the Page that uses the custom component

{.... "usingComponents": {"waterFallView": ".. /.. / component/WaterFallView/WaterFallView"}}

b. Add components to wxml and add id

c. Find the component in JS and call the fillData () method. IsFull transfers true when the drop-down is refreshed. FillData: function (isFull,goods) {let view = this.selectComponent ('# waterFallView'); view.fillData (isFull,goods);}, that's all for "how to realize WeChat Mini Programs Falls flow". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.