【uni app】列表和宫格布局探索

<template>
	<view>
		<!-- 列表模式_纵向 微信小程序不兼容-->
		<uni-list style="display: flex;flex-wrap: wrap;">
		<!-- 下一行代码为uni-list宫格模式：微信小程序不兼容，安卓和H5可以正常显示 -->
		<!-- <uni-list style="display: grid; grid-template-columns: 1fr 1fr;"> -->
			<uni-list-item direction="column" v-for="i in data" :key="i.Id" style="box-sizing: border-box;padding: 1rpx;margin: 1rpx;border: 1rpx solid #000;">
				<template v-slot:header>
					<view>
						<image class="img-attribute" src="../../static/meinv01.png" mode="aspectFit"></image>
					</view>
				</template>
				<template v-slot:body>
					<view style="display: grid; text-align: center; background-color: darkgray;">
					<text>ID：{{i.Id}}</text>
					<text>编码：{{i.Number}}</text>
					<text>名称：{{i.Name}}</text>
					<text>数量：{{i.Qty}}</text>
					</view>
				</template>
				<template v-slot:footer>
					<view style="background-color: aqua;">
						<text>下边部分</text>
					</view>
				</template>
			</uni-list-item>
		</uni-list>

		<!-- 列表模式_横向 -->
		<uni-list>
			<uni-list-item direction="row" v-for="i in data" :key="i.FID" style="box-sizing: border-box;padding: 1rpx;margin: 1rpx;border: 1rpx solid #000;">
				<template v-slot:header>
					<view>
						<image style="width: 80px; height: 100%;margin-right: 10rpx;" src="../../static/meinv01.png"
							mode="scaleToFill">
						</image>
					</view>
				</template>
				<template v-slot:body>
					<view style="display: grid; text-align: start; background-color: darkgray; width: 200px;">
					<text>ID：{{i.Id}}</text>
					<text>编码：{{i.Number}}</text>
					<text>名称：{{i.Name}}</text>
					<text>数量：{{i.Qty}}</text>
					</view>
				</template>
				<template v-slot:footer>
					<view style="background-color: aqua;">
						<text>右边部分</text>
					</view>
				</template>
			</uni-list-item>
		</uni-list>

		<!-- 宫格模式 -->
		<uni-grid :column="2" :square="false">
			<uni-grid-item v-for="i in data" :key="i.FID">
				<view style="display: grid; flex-wrap: wrap;">
					<image style="width: 100%;" src="../../static/meinv01.png" mode="aspectFill"></image>
					<text>ID：{{i.Id}}</text>
					<text>编码：{{i.Number}}</text>
					<text>名称：{{i.Name}}</text>
					<text>数量：{{i.Qty}}</text>
				</view>
			</uni-grid-item>
		</uni-grid>

		<!-- 宫格模式_自写代码 -->
		<view class="uni-list-waterfall">
			<view class="uni-list-item-waterfall" v-for="i in data" :key="i.FID">
				<view
					style="display: grid; flex-wrap: wrap;box-sizing: border-box;padding: 1rpx;margin: 1rpx;border: 1rpx solid #000;">
					<image class="img-attribute" src="../../static/meinv01.png" mode="aspectFit"></image>
					<text>ID：{{i.Id}}</text>
					<text>编码：{{i.Number}}</text>
					<text>名称：{{i.Name}}</text>
					<text>数量：{{i.Qty}}</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: [{
						"Id": 10001,
						"Number": "WL00001",
						"Name": "箱体A",
						"SpecsModel": "304不锈钢，100*50，板厚T=1.0",
						"Qty": 2,
					},
					{
						"Id": 10002,
						"Number": "WL00002",
						"Name": "箱体A",
						"SpecsModel": "304不锈钢，100*100，板厚T=1.0",
						"Qty": 5,
					},
					{
						"Id": 10003,
						"Number": "WL00003",
						"Name": "箱体B",
						"SpecsModel": "镀锌板，100*300，板厚T=1.0",
						"Qty": 4,
					}


				]
			}
		},
		// mounted功能为页面挂载的时候自动触发
		mounted() {
			console.log(this.data)
		},
		methods: {

		}
	}
</script>