uniapp项目轮播图怎么删除默认样式，改为自定义的样式

LAN354

已于 2022-10-17 22:06:36 修改

阅读量1.1k

点赞数

文章标签： uni-app 前端 javascript

于 2022-10-17 21:46:30 首次发布

本文链接：https://blog.csdn.net/weixin_61728046/article/details/127376624

版权

在项目中，为了给用户更好的视觉体验，有时我们需要将uniapp官网中提供的轮播图swiper组件自带的样式，改为自定义的样式。

1、将组件中自带的属性indicator-dots（是否显示面板指示点）去掉

2、需要写一个大盒子将swiper和view（放指示点）包住。定位：父相子绝，让指示点居中

3、给轮播图一个改变事件chang（），图片变化时指示点颜色改变

<!-- 轮播图 -->
    <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
      }
    }
  }