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])
			}
相关推荐
2501_915918415 小时前
掌握 iOS 26 App 运行状况,多工具协作下的监控策略
android·ios·小程序·https·uni-app·iphone·webview
知识分享小能手6 小时前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
2501_915909068 小时前
iOS 混淆实战,多工具组合完成 IPA 混淆与加固(源码 + 成品 + 运维一体化方案)
android·运维·ios·小程序·uni-app·iphone·webview
赵庆明老师9 小时前
Uniapp微信小程序开发:EF Core 中级联删除
uni-app
Javashop_jjj10 小时前
三勾软件| 用SpringBoot+Element-UI+UniApp+Redis+MySQL打造的点餐连锁系统
spring boot·ui·uni-app
Q_Q51100828517 小时前
python+uniapp基于微信小程序的心理咨询信息系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
HuYi_code18 小时前
WeChat 小程序下载文件实现
微信小程序·uni-app
00后程序员张19 小时前
HTTPS 包 抓取与分析实战,从抓包到解密、故障定位与真机取证
网络协议·http·ios·小程序·https·uni-app·iphone
2501_9159214320 小时前
iOS混淆与IPA加固实战手记,如何构建苹果应用防反编译体系
android·macos·ios·小程序·uni-app·cocoa·iphone
Q_Q5110082851 天前
python+uniapp基于微信小程序的学院设备报修系统
spring boot·python·微信小程序·django·flask·uni-app