微信小程序 -swiper实现左右点击切换，通过css改变指示点样式

最新推荐文章于 2023-09-15 20:44:35 发布

论闲

最新推荐文章于 2023-09-15 20:44:35 发布

阅读量2.1k

点赞数 2

分类专栏：微信小程序

原文链接：https://www.jianshu.com/p/b9b2a6aca180|https://blog.csdn.net/weixin_45102071/article/details/105733227

版权

微信小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

html

   <view class="len03">
      <view class="len03-btn" bindtap="swiperToLeft">
        <image src="../../img/l-btn.png" mode="widthFix" />
      </view>
      <swiper class="len03_swiper" current="{{current}}" indicator-dots="true" autoplay="{{autoplay}}">
        <block wx:for="{{background}}" wx:key="*this">
          <swiper-item>
            <view class="len03_swiper_img">
              <image src="{{item.url}}" mode="widthFix"></image>
            </view>
            <view class="len03_swiper_txt">{{item.jifen}}</view>
          </swiper-item>
        </block>
      </swiper>
      <view class="len03-btn" bindtap="swiperToRight">
        <image src="../../img/r-btn.png" mode="widthFix" />
      </view>
    </view>

通过点击实现翻页

	data{
		// swiper当前滑块index
        current: 1,
        autoplay: false,
        background: [{
            url: '../../img/100.png',
            jifen: 100
        }, {
            url: '../../img/200.png',
            jifen: 200
        }, {
            url: '../../img/300.png',
            jifen: 300
        }],
	}
    // swiper往左边
    swiperToLeft: function() {
        var current = this.data.current;
        this.data.current = current > 0 ? current - 1 : this.data.background.length - 1;
        this.setData({
            current: this.data.current,
        })
    },
    // swiper往右边
    swiperToRight: function() {
        var current = this.data.current;
        this.data.current = current < (this.data.background.length - 1) ? current + 1 : 0;
        this.setData({
            current: this.data.current,
        })
    },

通过css改变swiper指示点的样式

1.wx-swiper-dot 指示点的类名
2.wx-swiper-dot-active 当前指示点的类名

css

/* 改变指示点样式 */

.len03_swiper .wx-swiper-dot {
    width: 8rpx;
    height: 8rpx;
    border-radius: 5rpx;
    background: #ccc;
}

.len03_swiper .wx-swiper-dot-active {
    background: #fff;
}