#uniapp#案例#商品列表製作

可以看我的上一篇文章（這裏複用了這個組件）

滾動組件

<template>
	<about>
		<view class="listcard" v-for="i in 100">
			<view class="listcard-image"><image src="../../static/img/0.jpg" mode="aspectFill"></image></view>
			<view class="listcard-content">
				<view class="listcard-content_title">千層蛋糕</view>
				<view class="listcard-content_sum">美味的蛋糕，超級好喫，嘿嘿</view>
				<view class="listcard-content_des">
					<view class="listcard-content_des-money">￥100</view>
					<view class="listcard-content_des-money">馬上搶</view>
				</view>
			</view>
		</view>
	</about>
</template>

<script>
import about from '@/pages/about/about';
export default {
	components: {
		about
	},
	data() {
		return {
			title: 'Hello'
		};
	},
	onLoad() {},
	methods: {
		toPage2() {
			uni.navigateTo({
				url: '../page2/page2/page2'
			});
		},
		fun2() {
			console.log('hello');
			uni.navigateTo({
				url: '../page2/page2/page2'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
$width: 150px;
.listcard {
	border-bottom: 1px solid $uni-bg-color-grey;
	display: flex;
	padding: 10px;

	margin: 10px;
	border-radius: 5px;
	border-shadow: 0 0 5px 1px rgba($color: #000000, $alpha: 0.9);
	box-sizing: border-box;
	.listcard-image {
		width: 60px;
		height: 60px;
		border-radius: 5px;
		overflow: hidden;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.listcard-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-left: 10px;
		width: 100%;
		font-size: 14px;

		line-height: 1.2;
		.listcard-content_title {
		}

		,
		.listcard-content_sum {
			font-size: 10px;
		}
		.listcard-content_des {
			display: flex;
			justify-content: space-between;
			font-size: 12px;
			.listcard-content_des-money {
				padding: 0 5px;
				margin-right: 5px;
				border-radius: 15px;
				color: red;
				border: 1px solid red;
			}
		}
	}
}
</style>

對於佈局的設計

最外層是 一個 flex 佈局，左右兩邊 排列

右邊的內容又是一個 flex佈局
,顯示豎直排列，設置 space-between 間隔開元素， 再調整一下 margin，padding的值，定位。