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

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

 

 

1. 思考使用技术

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

2. 实现思路

核心：

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

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

3. 具体代码如下

<template>
	<!-- 使用uview-plus -->
	<view>
		<u-list @scrolltolower="scrolltolower" :height="listHeight">
			<u-list-item class="glodYBox">
				<u-list-item class="setListItem" v-for="(item, index) in goodsList" :key="index">
					<view class="itemBox">
						<view>
							<image class="itemImg" :src="item"></image>
						</view>
						<text class="introduce">天锁你洛克手表鉴定案例哈哈哈</text>
						<view class="guanFang">
							<text class="guanText">￥2000</text>
							<text class="time">￥10000</text>
						</view>
					</view>
				</u-list-item>
			</u-list-item>
		</u-list>
	</view>
</template>

<script setup>
    import { onMounted,reactive,ref } from "vue";
	let listHeight = ref(0);            //列表高度
    let goodsList = reactive([]);       //商品数据

    onMounted(()=>{
		//1. 请求手表箱包 或 珠宝配饰 或 手机数码 数据
		getGoodsList();
		//2.（1）获取windowHeight（2）减去上面高度175 和 底部tab高度50（3）将rpx转化成px
		setListHeight();
	});

    const getGoodsList = ()=>{
        let arr  = [
			"/static/goldEye/gold7.jpg",
			"/static/goldEye/gold8.jpg",
			"/static/goldEye/gold9.jpg",
			"/static/goldEye/gold10.jpg",
			"/static/goldEye/gold11.jpg",
			"/static/goldEye/gold12.jpg"
		];
		goodsList.push(...arr);
    };

    const setListHeight = ()=>{
		let tempHeight = uni.getSystemInfoSync().windowHeight;
		let tempHeightRpx= tempHeight*2-175-50;
		listHeight.value = parseInt(tempHeightRpx/2);
	};
</script>


<style lang="less" scoped>
	.glodYBox{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		.setListItem{
			flex: 0;
			.itemBox {
				width: 330rpx;
				min-width: 330rpx;
				overflow: hidden;
				margin: 10rpx 0;
			
				.introduce {
					font-size: 28rpx;
				}
			
				.guanFang {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
			
					.guanText {
						font-size: 18rpx;
						color: #555;
						margin-right: 10rpx;
					}
					.time {
						font-size: 18rpx;
						color: #ccc;
						text-decoration: line-through;
					}
				}
			}	
		}
	}

	.itemImg {
		width: 330rpx;
		height: 400rpx;
		border-radius: 10rpx;
	}
</style>

 

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;
	}