uniapp 使用uview plus的 u-list 并排显示两列

我在开发项目时需要效果如下：一排显示两个内容

 

 

1. 思考使用技术

该项目要求是，在微信小程序上运行，scroll-view有性能问题，对于大量数据的渲染效果太差，最后我选择了 uview plsu 里面的u-list组件（该组件背后也依赖scrollview，这就无奈了，既然它说是高性能组件，我暂且相信吧）

2. 实现思路

核心：

第一，给父元素设置flex布局，支持换行，横向排列

第二，子元素设置最小宽度，让它们可以互相拥挤，挤到下一行。

3. 具体代码如下

 

4. 到此就会暴漏该组件的问题，它在微信开发者工具里居然是纵向的，而在chrome浏览器是正常的一排两列显示的。

 具体原因：因为该组件，在微信小程序端，多添加了一个view，并设置了默认属性

我下面图的箭头指向，那个u-list-item 就是后插入的view添加的class 

我根据显示的样式路径（uni_modules/uview-plus/components/u-list-item/u-list-item.vue），找到源码u-list-item这类，之后修改为如下

.u-list-item {
		flex-direction: row;
		flex-shrink: 1;
		flex-wrap: wrap;
		justify-content: space-between;
	}