uni-app swiper自定义指示点和数字胶囊指示点_uniapp swiper 左下角有数字-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_32195805/article/details/112288549

本文记录了在项目中使用Swiper组件时，如何自定义轮播图指示点并实现数字胶囊样式的过程。通过Vue.js编写模板和样式，详细展示了如何在轮播图变化时更新指示点的状态，并提供了两种不同的指示点实现方式，包括点状指示点和数字胶囊指示点。代码示例清晰，易于理解，适用于前端开发中提升用户体验的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用swiper时，需求要把轮播图上的指示点要做成自定义和数字的，做个笔记记录下。

自定义指示点

在这里插入图片描述

<template name="swiperBox">
	<view class="swiperUnit">
		<swiper @change="swiperChange"  :interval="4000" :duration="400" class="swiper">
			<swiper-item v-for="(item , index) in swiperList" :key="index">
				<navigator class="swiper" :url="`/pages/details/${item.url}`">
					<image :src="item.img"></image>
				</navigator>
			</swiper-item>
		</swiper>
		<view class="rowDot">
			<view v-for="(item , index) in swiperList" :key="index" class="dots">
				<view :class="['dot', index === swiperCurrent ? 'active' : '']"></view>  
			</view> 
		</view>
	</view>
</template>

export default{
		name:"swiperBox",
		props:{
				swiperList:{
					url:{
						type: String,
						default: ''
					},
					img:{
						type: String,
						default: ''
					}
				}
			},
		data(){
			return{
				current: 0,
				swiperCurrent: 0
			}
		},
		methods:{
			 swiperChange (e) {
			    this.swiperCurrent = e.detail.current
			  }
		}
	}

.swiperUnit{
	.swiper {
	  width: 100%;
	  height: 400rpx;
	  image {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	  }
	}
	.rowDot{
		display: flex;
		position: absolute;
		bottom: 20rpx;
		left: calc((100% - 144rpx) / 2);
		.dots{
			flex-direction: row;
			justify-content: center;
			align-items: center;
			align-content: center;
			.dot {
			  margin-right:8rpx;
			  width: 40rpx;
			  height: 8rpx;
			  opacity: 1;
			  border-radius: 6rpx;
			  background: #fff5f9;
			}
			.dot.active {
			  background: #ff4e54;
			} 
		}
	}
}

数字胶囊指示点

在这里插入图片描述

<template name="swiperDots">
		<view class="swiper" >
			<!--轮播 -->
			<swiper @change="SwiperTab" :current="uCurrent" :indicator-dots="false" :interval="4000" :duration="400" :autoplay="true" class="swiper">
				<swiper-item v-for="(item,index) in swiperList " :key="index"  >
					<image :src="item.img"></image>
				</swiper-item>
			</swiper>	
			<!-- 更改指示器样式指示器：数字胶囊 -->
			<block class="number"  >	
				<view class="u-indicator-item-number">{{ uCurrent + 1 }}/{{ swiperList.length }}</view>	
				/*uCurrent + 1 指向当前显示的轮播图下标*/
				/*swiperList.length 轮播图页数*/ 
			</block>
		</view>
</template>

export default{
	name:"swiperDots",
	props:{
		swiperList:Array,
		mode:String
	},
	data(){
		return{
			uCurrent:0
		}
	},
	methods:{
		SwiperTab(e){
			this.uCurrent =Number(e.target.current)
			console.log(this.uCurrent);
		}
	}
}

.swiper {
  width: 100%;
  height: 600rpx;
  position: relative;
  image {
	width: 100%;
	height: 100%;
  }
  /* 指示器样式 */
  .u-indicator-item-number {
  	width: 40px;
  	padding: 10rpx;
  	line-height: 1;
  	background-color: rgba(0, 0, 0, 0.3);
  	border-radius: 100rpx;
  	font-size: 30rpx;
  	color: rgba(255, 255, 255, 0.8);
  	position: absolute;
  	right: 2%;
  	bottom: 3%;
  	text-align: center;
	letter-spacing: 3rpx;
  }
}