uniapp实现轮播图和2行列表

先上效果：

代码示例：

<template>
	<view>
		<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
			<swiper class="swiper-box" @change="change">
				<swiper-item v-for="(item ,index) in info" :key="index" :style="{'backgroundImage': 'url('+item.bg+')'}"
					class="item">
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		
		<view style="margin: 10px;">
			<view style="margin: 10px 0;">
				<uni-icons type="shop" color="orangered" size="20" style="position: relative; top: 2px;"></uni-icons>
				<span style="color: orangered">热卖商品</span>
			</view>
			<view style="display: flex;  flex-wrap: wrap;">
				<view v-for="(item, index) in list" :key="index" class="listItem">
					<image :src="item.img" mode="widthFix" style="width: 100%; border-radius: 10px 10px 0 0;">
					<view class="itemName">{{ item.name }}</view>
					<view style="color: red; margin: 5px 0;">￥ 200</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: [{
					bg: 'https://m15.360buyimg.com/mobilecms/jfs/t1/118032/32/24208/126953/62606d15Ea69f5eff/54d4d388691bd632.jpg!cr_1125x449_0_166!q70.jpg'
				}, {

					bg: 'https://m15.360buyimg.com/mobilecms/jfs/t1/104228/1/20522/93493/61dbb5f8E05de369c/554b8d206137e0c1.jpg!cr_1125x449_0_166!q70.jpg'
				}, {

					bg: 'https://m15.360buyimg.com/mobilecms/jfs/t1/180261/35/2110/221090/608fe010Ec4fe2138/a94eb9529247a0bf.jpg!cr_1125x449_0_166!q70.jpg'
				}],
				current: 0,
				mode: 'round',
				
				list: [
					{name: '原始黄金骆驼奶粉', img: 'https://img10.360buyimg.com/mobilecms/s360x360_jfs/t1/70211/37/17606/453076/6262cca4Ed723c73a/70fa27e47287b520.jpg!q70.dpg.webp'},
					{name: '原始黄金骆驼奶粉', img: 'https://img10.360buyimg.com/mobilecms/s360x360_jfs/t1/70211/37/17606/453076/6262cca4Ed723c73a/70fa27e47287b520.jpg!q70.dpg.webp'},
					{name: '原始黄金骆驼奶粉', img: 'https://img10.360buyimg.com/mobilecms/s360x360_jfs/t1/70211/37/17606/453076/6262cca4Ed723c73a/70fa27e47287b520.jpg!q70.dpg.webp'},
					{name: '原始黄金骆驼奶粉', img: 'https://img10.360buyimg.com/mobilecms/s360x360_jfs/t1/70211/37/17606/453076/6262cca4Ed723c73a/70fa27e47287b520.jpg!q70.dpg.webp'},
				
				]
			}
		},
		onLoad() {

		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			}
		}
	}
</script>

<style>
	.item {
		background-size: 100% 100%;
	}
	.listItem {
		flex: 49%; 
		margin-right: 2%;
		margin-bottom: 20px;
		 box-shadow: 2px 2px 2px #ccc;
		 border-radius: 10px;
	}
	.listItem:nth-child(2n) {
	    margin-right: 0;
	}
	.itemName {
		font-size: 14px;
		color: #666;
	}
</style>