uniapp swiper的使用,一次显示多个,竖着排列

Front思2023-09-19 16:51

bash 复制代码

<view class="markList">
			<view class="list">
				<swiper class="swiper1" :indicator-dots="indicatorDots">
					<swiper-item v-for="(item,index) in pbgoodlist" :key="index" class="swiperitem">
						<view class="tittle">热招空白城市</view>
						<view class="item">
							<span v-for="(item1,index1) in item.list" :class="index1 <=2 ? 'red' : ''" :key="index1">{{index1 + 1}}.{{item1}}</span>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>

bash 复制代码

.markList {
			margin: 45upx 30upx;

			.list {
				background: #fff;
				border-radius: 16upx;
				padding-bottom: 20upx;

				.swiper1 {
					height: 500upx;

					.swiperitem {
						.tittle {
							padding: 30upx 50upx;
						}

						.item {
							padding: 0 50upx;
							display: flex;
							flex-flow: column wrap;
							align-content: flex-start;
							height: 400upx;
							align-items: center;

							span {
								display: inline-flex;
								font-size: 30upx;
								align-items: center;
								width: 50%;
								margin-bottom: 30upx;
							}

							.red {
								color: red;
							}
						}
					}
				}
			}

		}

bash 复制代码

pbgoodlist: [{
						list: [
							'江西省赣州市',
							'广西省三江市',
							'广西省三江市',
							'广西省三江市',
							'广西省三江市',
							'广西省三江市',
							'广西省三江市',
							'广西省三江市',
							'广西省三江市',
							'广西省三江市'
						]
					},
					{
						list: [
							'江西省赣州市',
							'广西省三江市',
							'广西省三江市',
							'广西省三江市',
							'广西省三江市',
							'广西省三江市',
							'广西省三江市',
							'广西省三江市',
							'广西省三江市',
							'广西省三江市'
						]
					}
				],
				indicatorDots: true,

如果请求回来的数据是列表类型的话，需要处理一下结构在渲染：

bash 复制代码

this.pbgoodlist = res.data.data
			var data1 = this.pbgoodlist
			var list1 = []
			//一次显示5 个
			for (var i = 0, len = data1.length; i < len; i += 5) {
				list1.push(data1.slice(i, i + 5));
			}
			this.pbgoodlist = []
			for (var j = 0; j < list1.length; j++) {
				this.pbgoodlist.push(list1[j])
			}