微信小程序怎样修改swiper组件中样式的修改

学小知滚程序时写过一个B站demo，也遇到此问题，最后自定义Swiper的Dot来实现了。

思路是：用view组件重写dot，给swiper组件绑定bindchange事件用来获取当前第几个dot，动态改变class。

<!-- 滚动广告 begin -->

<view class="slider-wrapper">

<swiper bindchange="swiperChange" indicator-dots="{{indicatorDots}}"

autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">

<block wx:for="{{imgUrls}}" wx:key="*this">

<swiper-item>

<image src="{{item}}" class="slide-image"/>

</swiper-item>

</block>

</swiper>

<view class="swipe-btn-wrapper">

<view class="swipe-btn-list">

<view class="{{dotsClass[0]}}"></view>

<view class="{{dotsClass[1]}}"></view>搭卜余

<view class="{{dotsClass[2]}}"弊信></vi

要在小程序中实现滑动展示部分，可以使用小程序自带的swiper组件，具体步骤如下：

1. 在wxml文件中添加swiper组件代码：

```

<swiper class="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">卜旁袜让

<swiper-item>

<!-- 第一个滑动页的内容 -->

</swiper-item>

<swiper-item>

<!-- 第二个滑动页的内容 -->

</swiper-item>

<swiper-item>

<!-- 第三个滑动页的内容 -->

</swiper-item>

</swiper>

```

2. 在对应的js文件中设置swiper组件的相关参数，例如：

```

Page({

data: {

indicatorDots: true, // 是否显示指示点

autoplay: true, // 是否自动切换

interval: 5000, // 自动切换时间间隔

duration: 1000 // 滑动动画时长

}

})

```

3. 根据实际需求，设置滑动页的内容样式和布局。

通过以上步骤，就可以在小程序中实现型好橡滑动展示部分了。

---