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

已于 2023-09-20 15:22:27 修改
阅读量2.5k 收藏
点赞数
文章标签： uni-app
于 2023-09-19 15:03:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45788691/article/details/133029954
版权

在这里插入图片描述

<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>

.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;
							}
						}
					}
				}
			}

		}

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

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

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])
			}

swiper三行三列:
在这里插入图片描述

<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>demo</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
		<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
		<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
		<style>
			html,
			body {
				position: relative;
				height: 100%;
			}

			body {
				background: #eee;
				font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
				font-size: 14px;
				color: #000;
				margin: 0;
				padding: 0;
			}
			.commomPage{
				width: 100%;
				height: 700px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.pageLsft{
				width: 1320px;
				height: 700px;
				background: red;
			}
			.pageRight{
				position: relative;
				background: #f9e8d6;
				width: 600px;
				height: 700px;
				z-index: 99;
			}
			.productTittle{
				color: #f0831a;
				font-size: 25px;
				font-weight: bold;
				margin-top: 65px;
				padding-left: 50px;
			}
			.productType{
				margin-top: 10px;
				margin-left: 50px;
				margin-bottom: 10px;
			}
			.swiperA{
				width: 1320px;
				height: 700px;
				box-sizing: border-box;
				overflow: hidden;
			}
			
			.swiperA .swiper_img {
				width: 1320px;
				height: 700px;
			}
			.swiperA .swiper-wrapper .swiper-slide {
				cursor: pointer;
				text-align: center;
				font-size: 18px;
				height: 100%;
				display: -webkit-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				-webkit-box-pack: center;
				-ms-flex-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				-webkit-box-align: center;
				-ms-flex-align: center;
				-webkit-align-items: center;
				align-items: center;
			}
			
			.swiper-container {
				--swiper-navigation-color: #ffffff;
				--swiper-navigation-size: 20px;
			}

			.swiper {
				width: 320px;
				height: 435px;
				margin-left: 50px;
				margin-right: 130px;
			}

			.swiper .swiper-wrapper .swiper-slide {
				cursor: pointer;
				text-align: center;
				font-size: 18px;
				height: calc((400px - 30px) / 3);
				display: -webkit-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				-webkit-box-pack: center;
				-ms-flex-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				-webkit-box-align: center;
				-ms-flex-align: center;
				-webkit-align-items: center;
				align-items: center;
			}
			.swiperBntContent{
				position: absolute;
				bottom: 80px;
				left: 44px;
				width: 100px;
				display: flex;
			}
			
			/* .swiper-button-next, 
			.swiper-button-prev{
				    background: #746d67;
				    color: #fff;
				    width: 30px;
				    height: 30px;
				    border-radius: 50%;
			}
			.swiper-button-next:after, 
			.swiper-button-prev:after{
				font-size: 15px;
				color: #fff;
			} */
			
			.swiper-button-preva{
				background: url('https://file.xxxxx.com/resource/xxxxx/four/img/images/home_btn_back.png') no-repeat center;
				background-size: 100% 100%;
				width: 30px;
				height: 30px;
				cursor: pointer;
				border-radius: 50%;
				margin-right: 20px;
			}
			
			.swiper-button-nexta{
				background: url('https://file.xxxxx.com/resource/xxxxx/four/img/images/home_btn_next.png') no-repeat center;
				background-size: 100% 100%;
				width: 30px;
				height: 30px;
				cursor: pointer;
				border-radius: 50%;
			}
			.swiper .swiper-slide img{
				border-radius: 50%;
				width: 80px;
				height: 80px;
			}
			.swiper .swiper-slide span{
				position: absolute;
				color: #fff;
				font-size: 15px;
			}
		</style>
	</head>

	<body>
		<div class="commomPage">
			<div class="pageLsft">
				<div class="swiperA">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<img class="swiper_img" src="https://image.xxxxx.com/20221123/2317255249y0.jpg"/>
						</div>
						<div class="swiper-slide">
							<img class="swiper_img" src="https://image.xxxxx.com/20221123/2317255249y0.jpg"/>
						</div>
					</div>
				</div>
			</div>
			
			<div class="pageRight">
				<div class="productTittle">22大产品系列</div>
				<div class="productType">涵盖定制模块+功能+风格</div>
				<div class="swiper">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<img src="https://image.xxxxx.com/20221123/2317255249y0.jpg"/>
							<span>河刷锅</span>
						</div>
						<div class="swiper-slide">
							<img src="https://image.xxxxx.com/20221123/2317255249y0.jpg"/>
							<span>河刷锅</span>
						</div>
						<div class="swiper-slide">
							<img src="https://image.xxxxx.com/20221123/2317255249y0.jpg"/>
							<span>河刷锅</span>
						</div>
						<div class="swiper-slide">
							<img src="https://image.xxxxx.com/20221123/2317255249y0.jpg"/>
							<span>河刷锅</span>
						</div>
						<div class="swiper-slide">
							<img src="https://image.xxxxx.com/20221123/2317255249y0.jpg"/>
							<span>河刷锅</span>
						</div>
						<div class="swiper-slide">
							<img src="https://image.xxxxx.com/20221123/2317255249y0.jpg"/>
							<span>河刷锅</span>
						</div>
						<div class="swiper-slide">
							<img src="https://image.xxxxx.com/20221123/2317255249y0.jpg"/>
							<span>河刷锅</span>
						</div>
						<div class="swiper-slide">
							<img src="https://image.xxxxx.com/20221123/2317255249y0.jpg"/>
							<span>河刷锅</span>
						</div>
						<div class="swiper-slide">
							<img src="https://image.xxxxx.com/20221123/2317255249y0.jpg"/>
							<span>河刷锅</span>
						</div>
						<div class="swiper-slide">
							<img src="https://image.xxxxx.com/20221123/2317255249y0.jpg"/>
							<span>河刷锅</span>
						</div>
						<div class="swiper-slide">
							<img src="https://image.xxxxx.com/20221123/2317255249y0.jpg"/>
							<span>河刷锅</span>
						</div>
						<div class="swiper-slide">
							<img src="https://image.xxxxx.com/20221123/2317255249y0.jpg"/>
							<span>河刷锅</span>
						</div>
						<div class="swiper-slide">
							<img src="https://image.xxxxx.com/20221123/2317255249y0.jpg"/>
							<span>河刷锅</span>
						</div>
						<div class="swiper-slide">
							<img src="https://image.xxxxx.com/20221123/2317255249y0.jpg"/>
							<span>河刷锅</span>
						</div>
						<div class="swiper-slide">
							<img src="https://image.xxxxx.com/20221123/2317255249y0.jpg"/>
							<span>河刷锅</span>
						</div>
						<div class="swiper-slide">
							<img src="https://image.xxxxx.com/20221123/2317255249y0.jpg"/>
							<span>河刷锅</span>
						</div>
						<div class="swiper-slide">
							<img src="https://image.xxxxx.com/20221123/2317255249y0.jpg"/>
							<span>河刷锅</span>
						</div>
						<div class="swiper-slide">
							<img src="https://image.xxxxx.com/20221123/2317255249y0.jpg"/>
							<span>河刷锅</span>
						</div>
						<div class="swiper-slide">
							<img src="https://image.xxxxx.com/20221123/2317255249y0.jpg"/>
							<span>河刷锅</span>
						</div>
						<div class="swiper-slide">
							<img src="https://image.xxxxx.com/20221123/2317255249y0.jpg"/>
							<span>河刷锅</span>
						</div>
						<div class="swiper-slide">
							<img src="https://image.xxxxx.com/20221123/2317255249y0.jpg"/>
							<span>河刷锅</span>
						</div>
						<div class="swiper-slide">
							<img src="https://image.xxxxx.com/20221123/2317255249y0.jpg"/>
							<span>河刷锅</span>
						</div>
						<div class="swiper-slide">
							<img src="https://image.xxxxx.com/20221123/2317255249y0.jpg"/>
							<span>河刷锅</span>
						</div>
						<div class="swiper-slide">
							<img src="https://image.xxxxx.com/20221123/2317255249y0.jpg"/>
							<span>河刷锅</span>
						</div>
						<div class="swiper-slide">
							<img src="https://image.xxxxx.com/20221123/2317255249y0.jpg"/>
							<span>河刷锅</span>
						</div>
						<div class="swiper-slide">
							<img src="https://image.xxxxx.com/20221123/2317255249y0.jpg"/>
							<span>河刷锅</span>
						</div>
						<div class="swiper-slide">
							<img src="https://image.xxxxx.com/20221123/2317255249y0.jpg"/>
							<span>河刷锅</span>
						</div>
					</div>
				</div>
				<div class="swiperBntContent">
					<div class="swiper-button-preva swiper_btn"></div>
					<div class="swiper-button-nexta swiper_btn"></div>
				</div>
			</div>
		</div>
	</body>
	<script>
		var swiperA = new Swiper(".swiperA", {
			loop: true,
			autoplay: {
				delay: 3000,
				disableOnInteraction: false,
			},
			observer: true,
			observeParents: true,
		});
		var swiperB = new Swiper(".swiper", {
			// loop: true,
			slidesPerGroup:3,
			slidesPerView: 3,
			slidesPerColumn: 3,
			slidesPerColumnFill:'row',
			direction: 'horizontal',
			grid: {
				fill: 'row',//column
				rows: 3,
			},
			spaceBetween: 30,
			observer: true,
			observeParents: true,
			navigation: {
				nextEl: '.swiper-button-nexta',
				prevEl: '.swiper-button-preva',
			},
			on: {
				click:function(){
				    alert(this.clickedIndex);
				}
			}
		});
	</script>
</html>
我就不思
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3 + vite项目中使用swiper8实现切换一次滚动多张
Claire_cz的博客
07-13 4721
页面轮播图可以一次显示多个slide，同时当点击左右按钮时可以切换多张。 主要使用到的属性 // 一行有几个，设置slider容器能够同时显示的slides数量 // 几个slide列为一组，点击左右按钮切换的时候会以这个group的数量为准...
Vue中vue-awesome-swiper，一行显示多个图片
飞翔的小白
11-13 5275
1、Vue中安装vue-awesome-swiper npm install vue-awesome-swiper --save-dev 2、局部引入 <template> <div class="component-style"> <div style="width: 100%;height: 300px;"> <swiper :options="swiperOption" ..
vue2中使用swiper 一行显示多列
社会人
11-29 1471
Vue中使用swiper 一行显示多个图片
【Vue】vue3中使用swipe竖直方向上滚动
最新发布
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
07-10 452
【代码】【Vue】vue3中使用swipe竖直方向上滚动。
swiper 轮播 多行多列 横向排列
于利文的博客
09-17 5682
一直没仔细研究过swiper，用到了swiper多行多列的展示效果，官网默认是纵向排列 想要做到横向排列，需添加一个一个属性： slidesPerColumnFill:'row' slidesPerView: 4, slidesPerColumn: 4, slidesPerColumnFill:'row', 这样就可横向排列，记下来做个备份 ...
Swiper导航内容多列切换代码
07-31
Swiper导航内容多列切换代码是一款在获取到的导航数据无法一次性全部展示，分阶段切换导航条，导航条显示个数可自定义。
swiper-页面的多行显示
张新丁
07-04 2923
这节课我们介绍swiper页面的多行显示。   第一步，我们还是要创建一个swiper的基础页面。不过这次我们要多创建一些slide。 &lt;div class="swiper-container"&gt; &lt;div class="swiper-wrapper"&gt; &lt;div class="swiper-slide"&g..
Swiper 显示多行多列
我不晓得
12-30 2695
new Swiper('#popularity-container', { speed: 1600, // autoHeight: true, observer: true, observeParents: true, spaceBetween: 20, slidesPerView: 4, slidesPerColumn: 2, navigation: { nextEl: '#ppjs-slide-next1', prevEl:..
swiper图片懒加载（多行多列）
山有木兮木有枝 心悦君兮君不知
03-03 3894
首先看文档：lazyLoading_swiper3参数选项 问题一：多行多列的swiper发现只有第一行会出现懒加载，第二行的swiper一直不加载 解决方案：增加属性watchSlidesVisibility:true, 问题二：要做到懒加载正式图片之前先显示一张默认的背景图 解决方案：正式图片放在data-src中，默认背景图放在src中 <img class="swiper-lazy" data-src="images/goods.jpg" alt=" " src="images
swiper显示多个slide并且箭头在框外
Is_ayanya的博客
10-19 607
在这里插入图片描述](https://img-blog.csdnimg.cn/cb21a3bcafa140f094e62dd1cdda9d32.png)[在这里插入图片描述](https://img-blog.csdnimg.cn/a1a24dc462d94062ac4aad07b53b7258.png)在原来的swiper外嵌套一层div，position为relative，将切换button放到新增的div下。
微信小程序swiper使用网络图片不显示问题解决
10-15
以下是一个简单的Swiper使用示例： ```xml <swiper autoplay="true" interval="3000" duration="1000"> *this"> <swiper-item> <image src="{{item}}" width="355" height="150"></image> </swiper-item> ...
使用swiper轮播显示多张图片
cp_123321的博客
04-08 7572
效果如下: css样式, 需要引入swiper的css和js文件 <linkrel="stylesheet"href="./static/swiper/css/swiper.min.css"> <scriptsrc="./static/swiper/js/swiper.min.js"></script> .ying_sipder .s...
Vue项目，使用vue-awesome-swiper插件（可一次切换多张）
xxx_datou的博客
03-31 4084
一、准备工作 1、下载插件（最近版本的swiper可能会出现未知bug，所以我用的是5.4.5版本） npm install swiper@5.4.5 vue-awesome-swiper --save 二、页面使用 1、引入 import 'swiper/css/swiper.css' import { Swiper, SwiperSlide } from 'vue-awesome-swiper' 2、注册组件 components:{ Swiper, SwiperSlide } 3
vue3使用swiper
七十多岁的人了、
04-21 3744
vue3使用swiper
vue学习第四天 vue-swiper的使用
u013040887的博客
02-26 1581
写博客不是我的爱好，只是人脑毕竟空间只有那么大，有时候会忘了，好记性不如烂笔头，所以通过博客记录点点滴滴，以后可以翻出来看。vue-awesome-swiper官网链接https://www.npmjs.com/package/vue-awesome-swiper和上一篇随笔一样，我们先下载包，然后去main.js里面配置。1npm install vue-awesome-swiper --sav...
在vue中实现Swiper多行多列布局
Hello，this is cirzear
12-27 4984
这个问题困扰了本人好几天，调样式调的头疼，最后同组的老大给我指点迷津，其实不必要每个swiper容器都要将宽高定义，但是swiper-slide需要一个高，里面的内容可以自己更换，老大的一句其实很简单，总能让人如醍醐灌顶一样，恍然大悟，或许这就是经验的力量吧。 下面进入正题： 参考swiper官方文档的示例进行更改，将html换到vue中即可， 代码如下： template中定义好数据,这里就用...
vue3中使用swiper轮播显示多张图片
Anony_me的博客
08-17 3051
vue3中使用swiper轮播显示多张图片
Swiper.js 制作一屏显示多个slider的效果
热门推荐
我的米饭
12-26 1万+
Swiper.js 官方网站说明：https://www.swiper.com.cn/api/effects/196.html 使用Swiper.js制作一屏显示多个slider时，按照官方给出的API说明，发现不能满足自定义缩放大小，于是自己琢磨了一下，发现一个关键参数 slidesPerView，官方给出的解释是： slidesPerView: 设置slider容器能够同时显示的slide...
uni中swiper的使用,一次显示多个
qq_45894929的博客
12-25 4505
<view class="title">公益咨询</view> <view class="list"> <swiper class="swiper1"> <swiper-item v-for="(item,index) in pbgoodlist" :key="index" class="swiperitem"> <view class="item" v-for="(item1,index1) in item" :
swiper 不显示箭头
09-01
swiper不显示箭头可能是由于以下几种原因造成的： 1. 参数设置错误：swiper组件提供了一些配置项来控制箭头的显示与隐藏。其中，通过设置showArrows为false可以隐藏箭头，而通过设置showArrows为true则可以显示箭头。可能是你在配置swiper时将showArrows设置为了false或未设置该参数，导致箭头不显示。 2. 样式问题：swiper组件的箭头需要通过CSS样式来控制其显示与隐藏。可能是你在样式中修改了箭头的显示属性，或者将其隐藏的样式被覆盖了，导致箭头不显示。 3. 引入问题：在使用swiper组件时，可能没有正确引入swiper的CSS样式文件或者JS文件，或者引入时出现了错误，导致swiper组件无法正常渲染，进而导致箭头不显示。 为解决这个问题，你可以按照以下步骤去检查和修复： 1. 检查参数设置：确认swiper组件的参数配置正确，并确保showArrows已设置为true。 2. 检查样式：检查CSS样式中有关箭头的相关样式，确保没有修改到箭头的显示属性，并且样式文件正确引入。 3. 检查引入：检查swiper的CSS样式文件和JS文件是否正确引入，并确保引入的文件路径正确。 通过以上检查和修复，应该可以解决swiper不显示箭头的问题。如果问题仍然存在，可能是由于其他未知原因，可以进一步调试或查看Swiper的官方文档和社区以获取更多帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值