uniapp 电商app 瀑布流布局实现

た入场券 2021-07-25 17:04 1411阅读 0赞

## 瀑布流布局 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]  
如上的布局就是瀑布流布局。

由于图片的大小不一致，商品的格式错乱，形成的独特布局。

如果想要实现这种布局，可以通过两种方式来实现：

## 瀑布流布局实现方式一：column-count的方式 ##

[column-count的方式实现瀑布流布局：https://www.jq22.com/webqd4677 ][column-count_https_www.jq22.com_webqd4677]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 1]  
主要用到的参数：  
`column-count` `column-gap` `column-width` 几个参数；  
`column-count`:瀑布流的列数  
`column-gap`: 相邻瀑布流之间的间距  
`column-width`:瀑布流的宽度

以上几个参数是在父级元素上添加。子级元素上需要添加以下的代码：

-moz-page-break-inside:avoid;
    	-webkit-column-break-inside:avoid;
    	break-inside:avoid;

这样是可以展示出效果图那样的情况的，但是有个问题，这种样式的布局，会把数据全部放在左边一列，然后再次加载的数据（一般都是分页加载数据的），才放在右侧一列，这样就导致，右侧一列的图片总是慢一些才出现。

为了能够解决这个问题，我采用了第二种方法：

## 瀑布流布局实现方式二：flex的布局方式 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 2]  
解决思路：左右两个横向布局，然后每个都是纵向布局。

.root{ 
    	display:flex;
    	//横向布局
    	.item{ 
    		display:flex;
    		flex-direction:column;
    		align-itema:flex-start;  //这行代码决定了商品的高度可以根据图片自适应，否则高度会保持一致，就不会实现瀑布流布局了
    		.good{ 
    			// 这个是商品的内部布局，图片和文字之类的布局
    		}
    	}
    }

### 特别需要注意的是左右两侧的数据问题 ###

为了能够解决第一个瀑布流布局的问题，需要在获取到数据后，将数据数组列表一分为二。我这个地方的处理方式，是将数组从中间分为两个，前面的数据展示在左侧，后面的数据展示在右侧。

最好的实现方式应该是奇数元素与偶数元素分开放在两个数组。

//res.result.data就是从接口获取的数据
    let dataL = res.result.data;
    let dataR = res.result.data;
    let len = res.result.data.length;
    let min = Math.floor(len / 2);
    let rightList = dataR.splice(min,len);
    let leftList = dataL.splice(0,min);
    this.goodsListR = this.goodsListR.concat(rightList);
    this.goodsListL = this.goodsListL.concat(leftList);

后续如果有更好的解决办法，再补上。

### uniLoadMore组件的使用注意事项 ###

这个uniLoadMore组件需要跟数据展示的元素同级别，如果是在数据元素外面嵌套一个元素，然后再跟uniLoadMore同级别，则不会检测到数据上拉加载的状态。

向上面的这种，item元素是数据元素，如果将uniLoadMore组件放在跟root元素同级别，则不会实时检测到下拉加载数据。

因此我用了一个很笨的方法来实现；  
就是在uniLoadMore组件上面同级别的添加一个数据元素，然后将这个数据元素隐藏，以此来触发数据下拉加载。

# 补充说明：Math.floor()方法需要改为Math.ceil()方法 #

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/63791e8a7fc941b58058dbc51c8e0c99.png
[column-count_https_www.jq22.com_webqd4677]: https://www.jq22.com/webqd4677
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210725/93ccf930f87a4894bcfccd2206ca6091.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210725/22dccda43ae54e849661798d19b0cee9.png