微信小程序自定义swiper轮播图面板指示点|小圆点|进度条

已于 2022-11-15 16:03:26 修改
阅读量2.2w 收藏 182
点赞数 59
分类专栏： 微信小程序 文章标签： 小程序自定义swiper进度条 小程序自定义轮播图进度条 小程序自定义swiper小圆点 小程序自定义轮播图小圆点 自定义swiper面板指示点
于 2020-12-12 18:28:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42063951/article/details/111059699
版权

描述：

在工作中开发一个页面，多少都会用到轮播图，但是由于微信官方提供的轮播图swiper组件局限性太大了，所以接下来我会教大家怎么去自定义轮播图的进度条。

简单修改：

在这里插入图片描述
如果你的项目只是简单的修改小圆点的颜色，那么只需要修改官方提供的indicator-color和indicator-active-color参数就可以了

属性类型默认值说明
indicator-colorcolorrgba(0, 0, 0, .3)指示点颜色（也就是没选中小圆点时的颜色）
indicator-active-colorcolor#000000当前选中的指示点颜色

wxml：

<swiper indicator-dots="true" circular="true" indicator-color="white" indicator-active-color="orange">
  <swiper-item>
    <view class="red"></view>
  </swiper-item>
  <swiper-item>
    <view class="green"></view>
  </swiper-item>
  <swiper-item>
    <view class="blue"></view>
  </swiper-item>
</swiper>

wxss：

swiper {
  height: 400rpx;
}

swiper-item view {
  height: 100%;
}

.red {
  background-color: Pink;
}

.green {
  background-color: PaleGreen;
}

.blue {
  background-color: SkyBlue;
}

另外如果需要更改位置的话加上这两行样式就好了

.wx-swiper-dots {
  position: relative;
  /* unset复原重置属性值 */
  left: unset !important;
  right: 0rpx;
}

.wx-swiper-dots .wx-swiper-dots-horizontal {
  margin-bottom: 0rpx;
}

自定义长条状：

在这里插入图片描述
好了，接下里就是进入正题了，手动写一个静态的进度条我相信各位小伙伴都会，那么要怎么做才能让它随之我们的轮播图切换而变化呢？这里就需要用到current这个轮播图当前页的下标

属性类型默认值说明
currentnumber0当前所在滑块的 index

wxml：在结构上，我先手写一个进度条，然后让其悬浮在轮播图上面，接着再用三元运算符来判断轮播图的下标于进度条的下标是否相等，相等就把选中的样式赋给标签就好了，另外还需要绑定一个bindchange方法来监听current下标的改变。

<view class="parent">
  <!-- 轮播图 -->
  <swiper bindchange="monitorCurrent" indicator-dots="{{false}}" circular="true" indicator-color="white"
    indicator-active-color="orange" current="{{current}}" autoplay="{{autoplay}}">
    <block wx:for="{{backgroundArr}}" wx:key="*this">
      <swiper-item>
        <view class="{{item}}"></view>
      </swiper-item>
    </block>
  </swiper>
  <!-- 自定义轮播图进度点 -->
  <view class="dots">
    <block wx:for="{{backgroundArr}}" wx:for-index="index" wx:key="*this">
      <view class="{{current==index?'active':''}}"></view>
    </block>
  </view>
</view>

js：在动作上，我们只需要监听轮播图的下标变化就好了，一有变动更新下标即可。另外你会发现我动态控制了轮播图是否动播放，这是为了解决小程序长时间后台返回后页面轮播图出现反复抖动的bug。

Page({

  /**
   * 页面的初始数据
   */
  data: {
    //轮播图的数组
    backgroundArr: ['red', 'green', 'blue'],
    //轮播图当前的下标
    current: 0,
    //是否自动播放轮播图
    autoplay: false,
  },

  //监听轮播图的下标
  monitorCurrent: function (e) {
    // console.log(e.detail.current)
    let current = e.detail.current;
    this.setData({
      current: current
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    //开启轮播图
    this.setData({
      autoplay: true
    })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    //关闭轮播图
    this.setData({
      autoplay: false
    })
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    //关闭轮播图
    this.setData({
      autoplay: false
    })
  },

})

wxss：

.parent {
  position: relative;
}

swiper {
  height: 400rpx;
}

swiper-item view {
  height: 100%;
}

.red {
  background-color: Pink;
}

.green {
  background-color: PaleGreen;
}

.blue {
  background-color: SkyBlue;
}

.dots {
  position: absolute;
  bottom: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.dots view {
  width: 10rpx;
  height: 10rpx;
  margin: 0 6rpx;
  border-radius: 10rpx;
  background-color: #fff;
}

.dots .active {
  width: 30rpx;
  background-color: orange;
}

自定义带页码：

在这里插入图片描述

如果要显示页码的话，我们只需要使用轮播图的下标（从0开始）加上1来表示当前页，轮播图数组的长度来表示页码总数就好了。另外轮播图自动播放也要控制下，不然后台返回后会有bug。

wxml:

<view class="parent">
  <!-- 轮播图 -->
  <swiper bindchange="monitorCurrent" indicator-dots="{{false}}" circular="true" indicator-color="white"
    indicator-active-color="orange" current="{{current}}" autoplay="{{autoplay}}">
    <block wx:for="{{backgroundArr}}" wx:key="*this">
      <swiper-item>
        <view class="{{item}}"></view>
      </swiper-item>
    </block>
  </swiper>
  <!-- 自定义轮播图进度点 -->
  <view class="dots">{{current+1}}/{{backgroundArr.length}}</view>
</view>

js：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    //轮播图的数组
    backgroundArr: ['red', 'green', 'blue'],
    //轮播图当前的下标
    current: 0,
    //是否自动播放轮播图
    autoplay: false,
  },

  //监听轮播图的下标
  monitorCurrent: function (e) {
    // console.log(e.detail.current)
    let current = e.detail.current;
    this.setData({
      current: current
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    //开启轮播图
    this.setData({
      autoplay: true
    })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    //关闭轮播图
    this.setData({
      autoplay: false
    })
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    //关闭轮播图
    this.setData({
      autoplay: false
    })
  },
})

wxss：

.parent {
  position: relative;
}

swiper {
  height: 400rpx;
}

swiper-item view {
  height: 100%;
}

.red {
  background-color: Pink;
}

.green {
  background-color: PaleGreen;
}

.blue {
  background-color: SkyBlue;
}

.dots {
  position: absolute;
  right: 20rpx;
  bottom: 20rpx;
  width: 70rpx;
  height: 35rpx;
  line-height: 35rpx;
  text-align: center;
  font-size: 24rpx;
  border-radius: 20rpx;
  background-color: rgba(0, 0, 0, 0.4);
  color: #fff;
}

自定义带计时器：

在这里插入图片描述

接着就是这种有计时器的进度条了，这种写起来会麻烦一点。

wxml：在结构上，在写进度条时需要有两层，以我的GIF为例，外层用来放灰色的背景，内层用来放橙色的背景，接着我们只需要动态的去绑定width参数就好了。

<view class="parent">
  <!-- 轮播图 -->
  <swiper bindchange="monitorCurrent" indicator-dots="{{false}}" circular="true" indicator-color="white"
    indicator-active-color="orange" current="{{current}}" autoplay="{{autoplay}}" interval="{{interval}}">
    <block wx:for="{{backgroundArr}}" wx:key="*this">
      <swiper-item>
        <view class="{{item}}"></view>
      </swiper-item>
    </block>
  </swiper>
  <!-- 自定义轮播图进度点 -->
  <view class="dots-parent">
    <block wx:for="{{backgroundArr}}" wx:for-index="index" wx:key="*this">
      <view class="progress-line-bg">
        <view class="{{current==index?'progress-line':''}}" style="width:{{progressNum}}%"></view>
      </view>
    </block>
  </view>
</view>

js：在动作上，我们需要先封装一个轮播图进度条计时器的方法，其功能是使用选中的进度条从0达到100的填充效果，接着在生命周期onShow函数上初次执行这个方法，紧接着轮播图翻页时，再二次去执行这个方法就好了。需要注意的是计时器是在全局data对象里面注册的，这样做的用意是每次执行时都可以确保把上一个计时器给清理掉。另外考虑到性能的问题，在页面隐藏（onHide）或者卸载（onUnload）时，我们要把轮播图给关了，防止再次生成计时器，接着还需把没执行完的计时器也清理掉，具体看代码解析。另外我设置轮播图自动翻页的时间是5秒，需要修改的话记得把计时器那也从新计算一下。

Page({

  /**
   * 页面的初始数据
   */
  data: {
    //轮播图的数组
    backgroundArr: ['red', 'green', 'blue'],
    //轮播图当前的下标
    current: 0,
    //是否自动播放轮播图
    autoplay: false,
    // 轮播图自动切换时间间隔
    interval: 5000,
    //轮播图进度条的计时器
    progressNumInterval: null,
    //轮播图进度条的进度
    progressNum: 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    //开启自动轮播
    this.setData({
      autoplay: true
    })
    // 初次执行顶部轮播图的进度条的进度点
    this.progressLineInterval();
  },

  //监听轮播图的下标
  monitorCurrent: function (e) {
    // console.log(e.detail.current)
    let current = e.detail.current;
    this.setData({
      current: current
    })
    // 二次执行顶部轮播图的小圆点的进度点
    this.progressLineInterval();
  },

  //封装轮播图进度条计时器的方法
  progressLineInterval: function () {
    // 清理小圆点的计时器
    clearInterval(this.data.progressNumInterval)
    // 清理小圆点的进度
    this.setData({
      progressNum: 0,
    })
    /**
     * 轮播图的切换时间为5秒，进度条的进度为1-100%，
     * 因为5000/100=50毫秒，所以每50毫秒就要执行1个进度点
     * 另外需要把计时器寄存在data{}对象上，否则会清理不掉上一个计时器
     * */
    this.data.progressNumInterval = setInterval(() => {
      let progressNum = this.data.progressNum;
      // console.log(progressNum)
      if (progressNum < 100) {
        progressNum++;
      } else {
        progressNum = 0;
        // 清理进度条的计时器
        clearInterval(this.data.progressNumInterval)
      }
      this.setData({
        progressNum: progressNum
      })
    }, 50)
  },

  // 暂停轮播图
  pauseSwiper() {
    // 关闭自动轮播
    this.setData({
      autoplay: false
    })
    // 清理进度条的计时器
    clearInterval(this.data.progressNumInterval)
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    this.pauseSwiper()
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    this.pauseSwiper()
  },
})

wxss:

.parent {
  position: relative;
}

swiper {
  height: 400rpx;
}

swiper-item view {
  height: 100%;
}

.red {
  background-color: Pink;
}

.green {
  background-color: PaleGreen;
}

.blue {
  background-color: SkyBlue;
}

.dots-parent {
  position: absolute;
  bottom: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.dots-parent .progress-line-bg {
  margin-left: 10rpx;
  width: 45rpx;
  height: 8rpx;
  border-radius: 8rpx;
  background-color: rgba(255, 255, 255, 0.5);
}

.progress-line {
  height: 8rpx;
  border-radius: 8rpx;
  background-color: #E42C2C;
}

另外，如果你要在实体机上查看效果，点击预览就好了，如果点的是真机测试，会有延迟，导致进度条不能填充到100%的bug
在这里插入图片描述

觉得不错的小伙伴记得点个赞哦！！（づ￣3￣）づ╭❤～

爱唱歌的前端
关注
专栏目录
微信小程序轮播图实例：自定义指示点的样式，上下滚动
03-29
轮播图是大部分应用的一个常用的功能，常用于广告投放、产品展示、活动展示等等。漂亮的轮播图效果可以吸引用户的点击，达到推广产品的作用。废话少说，下面开始动手。业务需求： ...       轮播图是大部分应用的一个常用的功能，常用于广告投放、产品展示、活动展示等等。  漂亮的轮播图效果可以吸引用户的点击，达到推广产品的作用。  废话少说，下面开始动手。 业务需求：  5个图片轮番播放，可以左右滑动，点击指示点可以切换图片 重点说明：  由于微信小程序，整个项目编译后的大小不能超过1M  (此图片来源于网络，如有侵权，请联系删除! )  查看做轮播图功能的一张图片大小都已经有100+k了  (此图
如何自定义微信小程序swiper轮播图面板指示点的样式
qq_40194170的博客
01-05 2359
微信小程序的swiper组件是滑块视图容器，也就是说平常我们看到的轮播图就可以用它来做，不过这个组件有很多样式是固定的，但是，有时候我们的设计稿的面板指示点是需要个性化的，那么如何去修改swiper组件的面板指示点的样式呢？最近在使用swiper的时候也在想这个，最后发现在调试的时候，可以看到他的选择器。如图： 1 2 3
【微信小程序实战教程】之微信小程序核心组件详解
最新发布
柯晓楠
08-06 1152
组件化开发并不是小程序所特有的，一些其他编程语言中都有组件化的概念，准确来讲，只有视图层的展示，就必定要用到组件化。组件是视图层的最基本组成单元，组件中包含了一些基础功能和基础样式，一个组件就类似于一个自定义的标签。小程序框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发，那么微信小程序提供的基础组件肯定是要完成小程序开发的基础功能与微信风格保持一致的样式。视图容器组件主要用于控制页面的内容，与HTML中的标签功能类似，可以把小程序的容器组件理解为一个盒子容器，可以将其他组件填充在
【微信小程序】swiper自定义样式：指示点样式 wx-swiper-dot
coldriversnow的专栏
11-10 3300
默认指示点位置贴近底部。，注意中间，没有空格。
swiper修改轮播图下面小圆圈样式
sunnyboysix的博客
04-29 9329
具体样式 .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{ width: .18rem; height: .08rem; border-radius: 0; } .swiper-pagination-bullet-active{ back...
微信小程序自定义轮播图指示点
mycocoo的博客
08-07 2818
emmm先上效果图 微信小程序的swiper组件默认的指示点是小圆点，然后也不能修改它的大小和形状。 当然有时候我们希望更多样话，能够有更多的元素加载里面。 办法总比困难多，既然系统没有，那么我们就自己创一个指示点。 这就要用到swiper中的bindchange属性和current属性 所以，我们的中心思想就是获取当前轮播图滑块的index，然后传到js文件中，再创建一些受到js控制的视图容器，那我们就可以拥有更多样化的指示点了 //wxml //创建一个轮播图 <swiper curre
微信小程序swiper的轮播图面板指示点 小圆点的样式设置
克里斯蒂亚诺更新的博客
07-08 272
【代码】微信小程序swiper的轮播图面板指示点 小圆点的样式设置。
微信小程序轮播图指示点自定义（修改原生指示点样式）
苏苏就是小苏苏的博客
07-06 1885
1.实现效果 2.实现原理 修改swpier原生指示点的样式。 .wx-swiper-dots.wx-swiper-dots-horizontal .wx-swiper-dot .wx-swiper-dot::before .wx-swiper-dot-active 3.完整代码（更多代码请移至码云） https://gitee.com/susuhhhhhh/wxmini_demo 喜欢的就star+关注一下~ 4.主要代码 css样式： /* pages/dots/index2.wxss */ /*
小程序自定义swiper轮播图的进度条指示点
ahwangzc的博客
02-08 563
自定义轮播图的进度条
uniapp 微信小程序更改轮播图指示点
qq_61869009的博客
06-17 489
【代码】uniapp 微信小程序更改轮播图指示点。
微信小程序 — 自定义轮播图的面板指示点样式
棒怡情的专栏
06-02 1621
微信小程序 — 自定义轮播图的面板指示点样式
微信小程序自定义轮播图(常用四种效果)
09-26
微信小程序常用轮播图，常见四种轮播图，效果和PC的一样，常见的四种，可以自己修改……………………………………………………………………………………………………………………
微信小程序使用swiper组件实现层叠轮播图
10-17
本文主要介绍如何在微信小程序中使用swiper组件来实现层叠轮播图效果，这可以有效吸引用户的注意力，并提升用户体验。 首先，我们需要了解Swiper组件的基本概念。Swiper是一个强大的、灵活的滑动视图容器，通常用于...
微信小程序实现Swiper轮播图效果
10-15
- `indicatorDots`：是否显示面板指示点，如果设置为`true`，会在轮播图下方显示小圆点。 - `autoplay`：是否自动切换，设置为`true`时，轮播图会按照指定的`interval`时间间隔自动切换。 - `interval`：自动切换...
微信小程序之swiper轮播图中的图片自适应高度的方法
08-27
微信小程序Swiper轮播图图片自适应高度方法 微信小程序中的Swiper轮播图是非常常用的功能，但是官方提供的示例中，Swiper的高度是固定的150px，这样如果传入的图片大于这个高度就会被隐藏。为了解决这个问题，我们...
微信小程序 swiper 组件实现层叠轮播图，同时在轮播图中自定义信息
03-24
总结，通过以上步骤，我们成功地利用微信小程序的Swiper组件实现了层叠轮播图，并自定义了指示点样式和图片描述信息。在实际项目中，可以根据需求进一步优化细节，例如添加过渡动画、设置轮播速度等，以提升用户体验...
微信小程序——swiper轮播图自定义指示样式
qq_43201350的博客
08-17 409
微信小程序——swiper轮播图自定义指示样式
微信小程序 swiper 自定义组件
秦璐璐的博客帝国
04-08 433
实现功能 点击tab 轮播跟这改变 切换轮播 tab选中值相应改变 轮播内容 按照内容高度自适应 （默认150px） slot功能 自定义每一个轮播的内容 使用方法 <myswiper currentTab='{{currentTab}}' swiperList="{{itemList}}" TabList="{{TabList}}" bindtabListChange="tabListChange" bindswiperListChange="swiperL...
微信小程序自定义轮播图指示点（新建指示点）
苏苏就是小苏苏的博客
06-15 608
1.效果图 2.代码 <view class="top"> <swiper current="{{swiperCurrent}}" bindchange="swiperChange" circular="true" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{goodsInfo.imgList}}"> <
微信小程序 swiper
07-28
您好！关于微信小程序中的swiper组件，它是用来实现图片轮播效果的组件。可以通过在swiper组件中添加多个swiper-item子组件来展示多张图片，用户可以通过滑动或点击指示点来切换图片。 以下是一个简单的示例代码： ```html <swiper indicator-dots="{{true}}" autoplay="{{true}}"> <block wx:for="{{imageUrls}}"> <swiper-item> <image src="{{item}}" mode="aspectFit"></image> </swiper-item> </block> </swiper> ``` 其中，imageUrls是一个包含图片链接的数组，indicator-dots属性用于显示指示点，autoplay属性用于自动轮播。 您可以根据自己的需求设置swiper的其他属性和样式，如设置切换速度、指示点颜色等。更多详细信息和属性可参考微信小程序官方文档中的swiper组件部分。 希望能对您有所帮助！如有其他问题，请继续提问。
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值