uni-app修改默认的swiper 面板指示点_APP开发,混合APP_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

uni-app修改默认的swiper 面板指示点

来源：作者：woaimoban 类型：图文教程点击次数：发布时间：2023-10-14 00:11:20

uni-app修改默认的swiper 面板指示点的样式：

一、效果图

uni-app修改默认的swiper 面板指示点

二、代码

01<template>
02  <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff">
03    <swiper-item v-for='(item,index) in dataList' :key='index'>
04      <view><image :src="item.imgUrl" mode="aspectFill"></image></view>
05    </swiper-item>
06  </swiper>
07</template>
08<style scoped>
09  swiper{
10    width:100%;
11    height: 360rpx;
12  }
13  .swiper-img{
14    width:100%;
15    height: 360rpx;
16  }
17</style>

三、修改样式在App.vue 中的style写

01<style>
02  @import "uview-ui/index.scss";
03  /* #ifdef APP-PLUS */
04  uni-swiper .uni-swiper-dot {width: 40rpx;height: 4rpx;}
05  uni-swiper .uni-swiper-dot-active {width: 40rpx;border-radius: 6rpx;}
06  /* #endif */
07  /* #ifdef MP-WEIXIN */
08  wx-swiper .wx-swiper-dot {width: 40rpx;height: 4rpx;}
09  wx-swiper .wx-swiper-dot-active {width: 40rpx;height: 4rpx;border-radius: 6rpx;}
10  /* #endif */
11</style>