uni-app轮播图指示点自定义为图片

鸽一会

已于 2023-09-24 21:10:34 修改

阅读量322

点赞数 1

CC 4.0 BY-SA版权

文章标签： uni-app 前端 javascript

于 2023-09-19 18:06:01 首次发布

本文链接：https://blog.csdn.net/weixin_67512100/article/details/133039325

附源码

<template>
  <view>
    <!-- 使用 :current 属性设置当前轮播图的索引 -->
	<view class="Chart">
    <u-swiper
	 :list="list1" 
	 :current="currentIndex"
	 :height="170"
	 :radius="10"
	 >
		</u-swiper>
		
		<!-- 自定义指示点 -->
	 <view class="box">
	 	<button class="IndicatorImgOne" 
		:class="{ 'selected': selectedIndex === 0 }"
        @click="selectSlide(0)">
	 		</button>
	 	<button class="IndicatorImgTwo" 
		:class="{ 'selected': selectedIndex === 1 }"
        @click="selectSlide(1)">
	 		</button>
	 	<button class="IndicatorImgThree" 
		:class="{ 'selected': selectedIndex === 2 }"
		@click="selectSlide(2)">
	 	</button>
	 	<button class="IndicatorImgFour" 
		:class="{ 'selected': selectedIndex === 3 }"
		@click="selectSlide(3)">
	 	</button>
	 	<button class="IndicatorImgFive" 
		:class="{ 'selected': selectedIndex === 4 }"
		@click="selectSlide(4)">
	 	</button>
	 </view>
	 </view>
	
  </view>
</template>

<script>
export default {
  data() {
    return {
      list1: [
        'https://cdn.uviewui.com/uview/swiper/swiper1.png',
        'https://cdn.uviewui.com/uview/swiper/swiper2.png',
        'https://cdn.uviewui.com/uview/swiper/swiper3.png',
		'https://gd-hbimg.huaban.com/6a3419ccf3135eb1b390023a4caff385361196d2aef6-q7iGfU_fw240webp',
		'https://gd-hbimg.huaban.com/c6c66a8db2d17da14d2b1b706efebd0ab7395a91f05aa-vD90wa_fw240webp',
      ],
      currentIndex: 3, // 默认显示第一张轮播图
	  selectedIndex: -1, // 初始化选中的按钮索引为-1，表示没有选中任何按钮
    };
  },
  methods: {
    goToSlide(index) {
      // 点击按钮来切换到指定轮播图
      this.currentIndex = index;
    },
	selectSlide(index) {
	      // 点击按钮来切换到指定轮播图，并更新选中按钮的索引
	      this.currentIndex = index;
	      this.selectedIndex = index;
	    },
  },
};
</script>

<style scoped>
	.Chart{
		margin: 25rpx;
		width: 700rpx;
		height: 340rpx;
	}
	.box{
		position: fixed;
		margin-top: -90rpx;
		height: 90rpx;
		width: 700rpx;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 20rpx;
	}
	.IndicatorImgOne{
		position: absolute;
		margin-left: 10rpx;
		margin-top: 10rpx;
		height: 70rpx;
		width: 110rpx;
		background: url('https://cdn.uviewui.com/uview/swiper/swiper1.png') no-repeat;
		background-size: cover;
	}
	.IndicatorImgTwo{
		position: absolute;
		margin-left: 150rpx;
		margin-top: 10rpx;
		height: 70rpx;
		width: 110rpx;
		background-size: 100%;
		background: url('https://cdn.uviewui.com/uview/swiper/swiper2.png') no-repeat;
		background-size: cover;
		
	}
	.IndicatorImgThree{
		position: absolute;
		margin-left: 290rpx;
		margin-top: 10rpx;
		height: 70rpx;
		width: 110rpx;
		background-size: 100%;
		background: url('https://cdn.uviewui.com/uview/swiper/swiper3.png') no-repeat;
		background-size: cover;
	}
	.IndicatorImgFour{
		position: absolute;
		margin-left: 430rpx;
		margin-top: 10rpx;
		height: 70rpx;
		width: 110rpx;
		background-size: 100%;
		background: url('https://gd-hbimg.huaban.com/6a3419ccf3135eb1b390023a4caff385361196d2aef6-q7iGfU_fw240webp') no-repeat;
		background-size: cover;
	}
	.IndicatorImgFive{
		position: absolute;
		margin-left: 570rpx;
		margin-top: 10rpx;
		height: 70rpx;
		width: 110rpx;
		background-size: 100%;
		background: url('https://gd-hbimg.huaban.com/c6c66a8db2d17da14d2b1b706efebd0ab7395a91f05aa-vD90wa_fw240webp') no-repeat;
		background-size: cover;
	}
	
	/* 添加白色边框样式 */
	  .selected {
	    border: 2px solid white;
	  }
</style>