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

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])
			}
相关推荐
Q_Q5110082851 小时前
python+uniapp基于微信小程序团购系统
spring boot·python·微信小程序·django·uni-app·node.js·php
炒毛豆1 小时前
uniapp微信小程序+vue3基础内容介绍~(含标签、组件生命周期、页面生命周期、条件编译(一码多用)、分包))
vue.js·微信小程序·uni-app
盛夏绽放6 小时前
关于 uni-app 与原生微信小程序中的生命周期 —— 一次“生命旅程”的解读
微信小程序·小程序·uni-app
知识分享小能手7 小时前
uni-app 入门学习教程,从入门到精通,uni-app 基础知识详解 (2)
前端·javascript·windows·学习·微信小程序·小程序·uni-app
2501_916008898 小时前
iOS 发布全流程详解,从开发到上架的流程与跨平台使用 开心上架 发布实战
android·macos·ios·小程序·uni-app·cocoa·iphone
风清云淡_A10 小时前
【uniapp】uni.uploadFile上传数据多出一个304的get请求处理方法
uni-app
shykevin11 小时前
uni-app x商城,商品列表组件封装以及使用
windows·uni-app
cesske11 小时前
uniapp 编译支付宝小程序canvas 合成图片实例,支付宝小程序 canvas 渲染图片 可以换成自己的图片即可
小程序·uni-app·apache
Q_Q51100828521 小时前
python+uniapp基于微信小程序的旅游信息系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
2501_916007471 天前
iOS 混淆工具链实战,多工具组合完成 IPA 混淆与加固(iOS混淆|IPA加固|无源码混淆|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview