uni-swiper-dot 样式定义 不用通过组件亲测

实现效果

<template>

  <view class="container">

      <!-- 轮播 -->

      <swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000" :current="swiperCurrent" @change="changeSwiper">

          <swiper-item v-for="item in swiperImg" :key="item.id">

              <image class="swiper-item" :src="item" mode="widthFix"></image>

          </swiper-item>

      </swiper>

      <!-- 轮播指示点样式修改 -->

      <view class="dots">

          <block v-for="(item,index) in swiperImg.length" :key="item">

              <view class="dot" :class="index==swiperCurrent ? ' active' : ''"></view>

          </block>

      </view>

  </view>

</template>

<script>

  export default { 

      data() {         

          return {             

              swiperImg: [

                  'https://ossali.sucaihuo.com/sucaihuo/banners/24.jpg',

                  'https://ossali.sucaihuo.com/sucaihuo/banners/9.jpg'

              ],

              current: 0,

              swiperCurrent: 0,

          };

      },

      methods: {

          changeSwiper(e) {

              this.swiperCurrent = e.detail.current;

          }

      }

  }

</script>

<style lang="scss">

  .container {

      position: relative;

      .swiper {

          width: 700rpx;

          height: 240rpx;

          border-radius: 16rpx;

          overflow: hidden;

          margin-top: 16rpx;

          position: relative;

          margin-left: 26rpx;

          .swiper-item {

              width: 700rpx;

              height: 240rpx;

              border-radius: 16rpx;

          }

      }

      .dots {

          position: absolute;

          bottom: 20rpx;

          left: 50%;

          // 这里一定要注意兼容不然很可能踩坑         

          transform: translate(-50%, 0);

          -webkit-transform: translate(-50%, 0);       

          z-index: 99;

          display: flex;

          flex-direction: row;

          justify-content: center;

          .dot {

              width: 24rpx;

              height: 8rpx;

              transition: all .6s;

              background: rgba(0, 0, 0, .3);

              margin-right: 10rpx;

          }

          .active {

              width: 24rpx;

              height: 8rpx;

              background: rgba(255, 255, 255, .8);

          }

      }

  }

</style>