uni-app中轮播图swiper修改指示器样式为数字胶囊式

最新推荐文章于 2024-09-25 16:29:27 发布

原创最新推荐文章于 2024-09-25 16:29:27 发布 · 4.2k 阅读

12 ·

CC 4.0 BY-SA版权

笔记专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何在uni-app中实现九宫格与轮播图混合使用，并自定义数字胶囊样式的指示器。通过修改swiper组件的指示器样式，结合自定义样式和逻辑处理，最终实现了领导要求的效果。

九宫格grid和轮播图混合应用

思路：轮播图嵌套在九宫格外面，详情参考官方文档。https://uviewui.com/components/grid.html
领导要求将轮播图的指示器改为：数字胶囊类型，在uview组件的u-swiper组件中有这一属性 ：mode=“number” 。但是如果里面还要嵌套九宫格grid就不能应用u-swiper组件。此时就需要用uni-app中的swiper
进行到这步，我们需要把swiper中的指示器 :indicator-dots 改为false。令他不显示指示器默认样式
还有一点获取当前轮播展示的下标，并传值给指示器，完成数字胶囊样式指示器的轮播

官网

在这里插入图片描述
2. 根据官网的做出来之后，指示器样式是dots类型，这是根据官网做出来的样式↓

在这里插入图片描述

3. 不符合要求，我百度了好多才解决好这个指示器样式，首先在swiper下边定义一个指示器，样式和位置在style中更改。

/* 指示器样式 */
	.u-indicator-item-number {
		width: 40px;
		padding: 6rpx 16rpx;
		line-height: 1;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 100rpx;
		font-size: 26rpx;
		color: rgba(255, 255, 255, 0.8);
		position: relative;
		left: 45%;
	}

子组件中template部分代码

在这里插入图片描述

<view class="swiper" >
		<!--外部轮播 -->
		<swiper @change="topSwiperTab" :current="uCurrent" :indicator-dots="false"  >
			<swiper-item v-for="(item,index) in newBankList " :key="index"  >
				<u-grid :col="4" >
						<u-grid-item v-for="(item2,index2) in item" :key="index2" >
							<u-image width="30px" height="30px" :src="item2.src"></u-image>
							<view class="grid-text">{{item2.text}}</view>
						</u-grid-item>
				</u-grid>
			</swiper-item>
		</swiper>	
		<!-- 更改指示器样式
		 指示器：数字胶囊 -->
		<block class="number"  >	
			<view class="u-indicator-item-number">{{ uCurrent + 1 }}/{{ newBankList.length }}</view>	
		</block>
	</view>

子组件中script部分代码

	props:{
			
			newBankList:Array,
			mode:String
		},
		data(){
			return{
				uCurrent:0
			}
		},
	methods:{
			topSwiperTab(e){
				this.uCurrent =Number(e.target.current)
				// number(e.target.current)
				console.log(this.uCurrent);
			}
		}