swiper组件结合flex布局实现轮播（动态渲染）

 小程序swiper组件结合flex布局实现轮播（动态渲染）

小程序swiper文档：https://uniapp.dcloud.net.cn/uni-app-x/component/swiper.html#swiperhttps://uniapp.dcloud.net.cn/uni-app-x/component/swiper.html#swiper

• 简单示例：

		<swiper :autoplay="false" class="contentSlide " indicator-color="rgba(0,0,0,0.3)"
			indicator-active-color="#625f5f" indicator-dots circular>
			<swiper-item class="list">
				<view class="listItem" v-for="t in 8">
					<image src="../../static/likeFx/1.png" />
					<view>美食{{t++}}</view>
				</view>
			</swiper-item>
			<swiper-item class="list">
				<view class="listItem" v-for="t in 8">
					<image src="../../static/likeFx/1.png" />
					<view>服务{{t+8}}</view>
				</view>
			</swiper-item>
		</swiper>
        <style>
	.contentSlide {
		background-color: pink;
		font-size: 30rpx;
		height: 430rpx;  //轮播盒子的高度
	}

	.contentSlide image {
		width: 65px;
		height: 65px;
		// margin: 0 8rpx;
	}

	.list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.listItem {
		// flex: 1;  //一行现实五个
        //width：33.33%  //一行显示三个
        width: 25%;  //一行显示四个
		text-align: center; 
		// background-color: skyblue;
	}

	.listItem>view {
		width: 65px;
		text-align: center;
		margin: auto;
	}
        <style/>    

• 实现动态渲染

示例代码：

<!-- 轮播显示 start-->
<swiper :autoplay="false" class="contentSlide " indicator-color="rgba(0,0,0,0.3)"
	indicator-active-color="#625f5f" indicator-dots circular style="height: 480rpx;">
	<swiper-item class="list" v-for="t in Math.ceil(items.child.length/8)">
		<view class="cu-list grid col-4 no-border" style="padding: 0px 5px;">
			<block v-for="(item, i) in items.child.slice((t-1)*8,t*8)" :key="i">
				<view class="cu-item animate__animated animate__fadeInUp" style="align-items: center;">
					<view class="menu-icon" @click="goPage" :data-url="item.resurl" :data-isweb="item.isweb"
						:data-weburl="item.weburl">
						<image v-if="item.restype == 'IMAGE'" :src="item.icon" mode="contain" class="image-icon" />
						<view v-else class="grid-icon">
							<view :class="['cuIcon-' + item.icon, 'text-' + item.iconcolor]"
								style="font-size: 60rpx;display: flex;align-items: center;justify-content: center;">
							</view>
							<view class="cu-tag badge" v-if="item.badge">
								<block v-if="item.badge != 1">{{ item.badge > 99 ? '99+' : item.badge }}</block>
							</view>
						</view>
					</view>
					<text style="margin-top: 20rpx;">{{ item.name }}</text>
				</view>
			</block>
		</view>
	</swiper-item>
</swiper>
<!-- 轮播显示 end -->

重点注意划红线的部分

这里我们分为了两页所以使用了 Math.ceil(）

 Math.ceil()是一个数学库函数，用于返回大于或等于给定数字的最小整数。它的语法是Math.ceil(x)，其中x是要进行向上取整的数字。

每页显示八个所以使用了   v-for="(item, i) in items.child.slice((t-1)*8,t*8)" :key="i"   

这里取的是从第0个开始取，第八个结束，第二页从第九个开始

ps：描述可能不是很清楚，可自行尝试