uni-app中swiper的指示点自定义

最新推荐文章于 2025-06-14 17:04:56 发布

whatHappen?

最新推荐文章于 2025-06-14 17:04:56 发布

阅读量4.3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签： js vue 小程序

本文链接：https://blog.csdn.net/weixin_48920798/article/details/112175171

本文介绍如何在uni-app中自定义swiper组件的指示点样式。通过监听`@change`事件，结合`e.detail.current`获取当前滑块下标，并在自定义组件内根据下标设置样式。欢迎讨论交流。

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

在平时工作中，有时候uni-app中swiper的指示点的样式位置可能需要我们自定义，

类似于

<swiper class="swiper" circular="true" previous-margin="48rpx" next-margin="21rpx" @change='intervalChange'
			 :current-item-id='currentIndex' :autoplay="false" :duration="500">
				<swiper-item class="t-f-swiper"  v-for="(item,index) in pastList" :key="index" :item-id="index">
					<view class="swiper-item" >
						<image  src="../../../static/team-forecast/card.png" mode=""></image>
					</view>
					<view class="t-f-box">
						<view class="titleTime">
							<view class="deadLine">
								<view class="deadLine-a">日期:</view>
								<view class="deadLine-b">{
  
  {(item.date).substr(0,4)}}年{
  
  {(item.date).substr(5,2)}}月{
  
  {(item.date).substr(8,2)}}日</view>
							</view>
							<view class="t-f-box1"