微信小程序swiper小圆点默认样式改变

1.轮播图的小圆点默认样式为黑灰色，达不到我们的需求。改变默认样式...

<view class="swiper-container">
    <swiper class="swiper" interval="5000" duration="500" circular="true" current="{{swiperCurrent}}" bindchange="swiperChange">
        <block wx:for="{{imgUrls}}" wx:key="this">
            <swiper-item>
                <image src="{{item}}" class="slide-image"></image>
            </swiper-item>
        </block>
    </swiper>
    <view class="dots">
        <block wx:for="{{slider}}" wx:key="this">
            <view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>
        </block>
    </view>
</view>
复制代码

js

    data:{
        imgUrls: [
            'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
            'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
            'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
        ],
        swiperCurrent: 0
    },
    
    swiperChange: function (e) {
        let that = this;
        that.setData({
            swiperCurrent: e.detail.current
        })
    },
复制代码

css

    .swiper-container{
      position: relative;
    }
    .swiper-container .swiper{
      height: 300rpx;
    }
    .swiper-container .swiper .slide-image{
      width: 100%;
      height: 100%;
    }
    .swiper-container .dots{
      position: absolute;
      left: 0;
      right: 0;
      bottom: 20rpx;
      display: flex;
      justify-content: center;
    }
    .swiper-container .dots .dot{
      margin: 0 8rpx;
      width: 14rpx;
      height: 14rpx;
      background: #fff;
      border-radius: 8rpx;
      transition: all .6s;
    }
    .swiper-container .dots .dot.active{
      width: 24rpx;
      background: #f80;
    }
复制代码

结果如图：

2.微信小程序 swiper 显示图片计数 当前/总数

<view class="swiper-container">
    <swiper class="swiper" interval="5000" duration="500" circular="true" current="{{swiperCurrent}}" bindchange="swiperChange">
        <block wx:for="{{imgUrls}}" wx:key="*this">
            <swiper-item>
                <image src="{{item}}" class="slide-image" mode="center" />
            </swiper-item>
        </block>
    </swiper>
    <view class="imageCount">{{swiperCurrent+1}}/{{imgUrls.length}}</view>
</view>
复制代码

js

 data:{
        imgUrls: [
            'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
            'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
            'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
        ],
        swiperCurrent: 0
    },
    
    swiperChange: function (e) {
        let that = this;
        that.setData({
            swiperCurrent: e.detail.current
        })
    }
复制代码

css

  .swiper-container{
      position: relative;
    }
    .swiper-container .swiper{
      height: 300rpx;
    }
    .swiper-container .swiper .slide-image{
      width: 100%;
      height: 100%;
    }
    .imageCount{
      width: 80rpx;
      height: 80rpx;
      background-color: #c5c5cc;
      border-radius: 50%;
      line-height: 78rpx;
      color: #ffffff;
      text-align: center;
      font-size: 26rpx;
      position: absolute;
      right: 26rpx;
      bottom:20rpx;
    }
复制代码

结果如图：

3.微信小程序 swiper 显示图片计数 当前/总数 与 点击切换图片

<view class="swiper-container">
    <swiper class="swiper" interval="5000" duration="500" circular="true" current="{{swiperCurrent}}" bindchange="swiperChange">
        <block wx:for="{{imgUrls}}" wx:key="*this">
            <swiper-item>
                <image src="{{item}}" class="slide-image" mode="center" />
            </swiper-item>
        </block>
    </swiper>
    <view class="imageCount">{{swiperCurrent+1}}/{{imgUrls.length}}</view>
    <button class="prev" bindtap='bindPrev' wx:if="{{isPrev}}">
        <image class="icon" src="" />
     </button>
     <button class="next" bindtap='bindNext' wx:if="{{isNext}}">
        <image class="icon" src="" />
     </button>
</view>
复制代码

js

 data:{
        imgUrls: [
            'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
            'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
            'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
        ],
        swiperCurrent: 0,
        isNext: false, 
        isPrev: false,
    },
    
    swiperChange: function (e) {
        let that = this;
        that.setData({
            swiperCurrent: e.detail.current
        })
        if (e.detail.current === this.data.imgUrls.length - 1) {
            this.setData({
                isNext: false
            })
        } else {
            this.setData({
                isNext: true
            })
        }
        if (e.detail.current !== 0) {
            this.setData({
                isPrev: true
            })
        } else {
            this.setData({
                isPrev: false
            })
        }
    },
    
    bindNext: function () {
        let swiperCurrent = this.data.swiperCurrent;
        swiperCurrent++
        this.setData({
            swiperCurrent: swiperCurrent
        })
        if (swiperCurrent === this.data.imgUrls.length - 1) {
           this.setData({
             isNext: false
           })
        }
        if (swiperCurrent !== 0) {
           this.setData({
             isPrev: true
           })
        }
   },
   
    bindPrev: function () {
        let swiperCurrent = this.data.swiperCurrent;
        swiperCurrent--
        this.setData({
            swiperCurrent: swiperCurrent
        })
        if (swiperCurrent !== this.data.imgUrls.length - 1) {
            this.setData({
             isNext: true
            })
        }
        if (swiperCurrent === 0) {
            this.setData({
             isPrev: false
            })
        }
   },
   
   onLoad: function(){
        if (this.data.imgUrls.length > 1) {
          this.setData({
            isNext: true
          })
        }
   }
复制代码

css

.swiper-container{
      position: relative;
    }
    .swiper-container .swiper{
      height: 300rpx;
    }
    .swiper-container .swiper .slide-image{
      width: 100%;
      height: 100%;
    }
    .imageCount{
      width: 80rpx;
      height: 80rpx;
      background-color: #c5c5cc;
      border-radius: 50%;
      line-height: 78rpx;
      color: #ffffff;
      text-align: center;
      font-size: 26rpx;
      position: absolute;
      right: 26rpx;
      bottom:20rpx;
    }
.swiper-container .prev{
    // 写定位
}
.swiper-container .next{
    // 写定位
}
复制代码

转载于:https://juejin.im/post/5b84b707f265da435a486244