uniapp プロジェクト カルーセルのデフォルト スタイルを削除し、カスタム スタイルに変更する方法

プロジェクトでは、ユーザーにより良い視覚体験を提供するために、uniapp 公式 Web サイトで提供されているカルーセル スワイパー コンポーネントのスタイルをカスタム スタイルに変更する必要がある場合があります。

1.コンポーネントのindicator -dots属性(パネルインジケータードットを表示するかどうか)を削除します。

2. スワイパーを囲んで (インジケーター ポイントが配置される場所) を表示するための大きなボックスを作成する必要があります。ポジショニング: 父親と息子が調和し、インジケーターポイントが中心になるように配置します。

3. カルーセル画像に変化イベント（チェンジ）を与えると、画像が変化するとインジケーターポイントの色が変わります。

<!-- 轮播图 -->
    <view class="" style="position: relative;">
      <swiper :autoplay="true" circular :interval="3000" :duration="1000" class="swiper_wrapper autoMargin"
        @change="change">
        <swiper-item>
          <view class="swiper-itemsa">
            <image
              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0174d95da92543a8012163ba2b098e.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668068380&t=ab7379ecd7efda7f2aa0d03e55fff646"
              mode=""></image>
          </view>
        </swiper-item>
        <swiper-item>
          <view class="swiper-itemsa">
            <image
              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01a23c61529c6011013e89433f2fa4.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668068380&t=4d344a0c181b0f75c2619e6e438ccae8"
              mode=""></image>
          </view>
        </swiper-item>
        <swiper-item>
          <view class="swiper-itemsa">
            <image
              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F016a515da9255ea8012163ba78221c.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668068380&t=eb616536ddb75d8582e52c47954683ac"
              mode=""></image>
          </view>
        </swiper-item>
      </swiper>
      <view class=""
        style="display: flex;position: absolute;bottom: 20rpx;left: 50%;transform: translateX(-50%);">
        <view v-for="(i,index)  in data.length" :class="index== swIndex?'sw-ac':'sw'"></view>
      </view>
    </view>

cssファイル

.scroll-img-one {
    width: 108rpx;
    height: 78rpx;
  }

  .sw {
    width: 32rpx;
    height: 4rpx;
    background-color: #000000;
    margin: 0 12rpx;
  }

  .sw-ac {
    width: 32rpx;
    height: 4rpx;
    background-color: #0BCE56;
    margin: 0 12rpx;
  }
// 轮播图
  .swiper_wrapper {
    transform: translateY(0);
    overflow: hidden;
    border-radius: 16rpx 16rpx 16rpx 16rpx !important;
  }

  .swiper-itemsa {
    width: 100%;
    height: 332rpx;

    image {
      width: 100%;
      height: 100%;
      // border-radius: 16rpx 16rpx 16rpx 16rpx;
    }
  }

  .swiper_wrapper .wx-swiper-dot {
    width: 32rpx;
    height: 4rpx;
    background: #000000;
  }

  .swiper_wrapper .wx-swiper-dot.wx-swiper-dot-active {
    width: 32rpx;
    height: 4rpx;
    background: #0BCE56;
  }

  // 滚动图
  .scroll-box {
    margin-left: 24rpx;
  }

  .scroll-view_H {
    margin-top: 10px;
    white-space: nowrap;
    // width: 100%;

  }

  .scroll-view-item_H {
    display: inline-block;

    &:last-child .box {
      margin-right: 24rpx;
    }
  }

 data() {
      return {
        swIndex: 0,
        data: [{

          },
          {

          }, {

          }
        ]
      }
    },
    methods: {
      change({
        detail
      }) {
        this.swIndex = detail.current
      }
    }
  }