小程序 swiper 显示当前页/总页

最新推荐文章于 2025-05-19 14:53:27 发布

原创最新推荐文章于 2025-05-19 14:53:27 发布 · 6.5k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #swiper #当前页/总页

小程序专栏收录该内容

37 篇文章

订阅专栏

本文详细介绍了如何在小程序中实现轮播图效果，包括JS逻辑处理、HTML结构搭建及CSS样式设计，通过bindchange事件监听轮播变化，实现图片切换与当前页显示。

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

先上效果图：

JS:

swiperChange: function(e) {
    if (e.detail.source == 'touch') {
      this.setData({
        current: e.detail.current
      })
    }
  },

swiper 组件中，current：当前所在滑块的 index（用于计算当前页），当前图片index+1/图片数组长度，获取到当前页/总页。通过 bindchange 事件：current 改变时会触发 change 事件，event.detail = {current: current, source: source}。注意：如果在 bindchange 的事件回调函数中使用 setData 改变 current 值，则有可能导致 setData 被不停地调用，因而通常情况下请在改变 current 值前检测 source 字段来判断是否是由于用户触摸引起。小程序组件

HTML：

<view class="swiperContainer">
  <swiper bindchange="swiperChange" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" style='height: 380rpx;'>
    <block wx:for="{{imgUrls}}" wx:key="*this">
      <swiper-item wx:key="*this">
        <image src="{{item}}" class="slide-image" mode="center" class='img' mode='widthFix' />
      </swiper-item>
    </block>
  </swiper>
  <view class="imageCount">{{current+1}}/{{imgUrls.length}}</view>
</view>

CSS:

.swiperContainer {
  position: relative;
}

.img {
  width: 100%;
}
.imageCount {
  width: 80rpx;
  height: 60rpx;
  background-color: #c5c5cc;
  border-radius: 50%;
  line-height: 58rpx;
  color: #fff;
  text-align: center;
  font-size: 26rpx;
  position: absolute;
  right: 26rpx;
  bottom: 20rpx;
}

JS:

data: {
    imgUrls: [
      'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/b51889744910df7979a2f672434da84e.jpg?thumb=1&w=720&h=360',
      'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/37dfdc929ee9a4313facb0b23ebcd721.jpg?thumb=1&w=720&h=360',
      'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/a0ff3dc30027f3b615bfe03f1d306ee5.jpg?thumb=1&w=720&h=360',
      'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/2320573b3be643e29f5270a97e1a9c1d.jpg?thumb=1&w=720&h=360'
    ],
    current: 0
  },