小程序修改轮播图的小点样式

最新推荐文章于 2025-03-16 12:07:19 发布

小支

最新推荐文章于 2025-03-16 12:07:19 发布

阅读量8k

点赞数 3

分类专栏：微信小程序小程序

本文链接：https://blog.youkuaiyun.com/weixin_40344560/article/details/83926437

版权

微信小程序同时被 2 个专栏收录

11 篇文章

订阅专栏

小程序

6 篇文章

订阅专栏

本文详细介绍了一种在微信小程序中实现轮播图组件的方法，包括wxml布局、css样式和js逻辑。通过自定义swiper组件，实现了图片自动轮播和指示点功能，提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本功能参考自https://www.cnblogs.com/momozjm/p/8609728.html 在原来的代码上添加部分js

效果如下：

wxml：

<view class='swiper-box'>
    <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperChange">
      <block wx:for="{{imgUrls}}">
        <swiper-item>
          <image src="{{item}}" class="slide-image" />
        </swiper-item>
      </block>
    </swiper>
    <view class="dots"> 
      <block wx:for="{{imgUrls}}" wx:key="unique"> 
        <view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view> 
      </block> 
    </view>
  </view>

css：

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

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'
    ],
    indicatorDots: false,
    autoplay: true,
    interval: 4000,
    duration: 800,
    swiperCurrent: 0,

}
  swiperChange(e) {
    let current = e.detail.current;
    // console.log(current, '轮播图')
    let that = this;
    that.setData({
      swiperCurrent: current,
    })
  },