微信小程序视图容器之swiper滑块详解（三）

╰+攻爆jí腚メ 2023-01-12 12:00 348阅读 0赞

# swiper #

> 滑块视图容器。其中只可放置[swiper-item][]组件，否则会导致未定义的行为。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>必填</th> 
   <th>说明</th> 
   <th>最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>indicator-dots</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>否</td> 
   <td>是否显示面板指示点</td> 
   <td><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td>indicator-color</td> 
   <td>color</td> 
   <td>rgba(0, 0, 0, .3)</td> 
   <td>否</td> 
   <td>指示点颜色</td> 
   <td><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.1.0</a></td> 
  </tr> 
  <tr> 
   <td>indicator-active-color</td> 
   <td>color</td> 
   <td>#000000</td> 
   <td>否</td> 
   <td>当前选中的指示点颜色</td> 
   <td><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.1.0</a></td> 
  </tr> 
  <tr> 
   <td>autoplay</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>否</td> 
   <td>是否自动切换</td> 
   <td><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td>current</td> 
   <td>number</td> 
   <td>0</td> 
   <td>否</td> 
   <td>当前所在滑块的 index</td> 
   <td><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td>interval</td> 
   <td>number</td> 
   <td>5000</td> 
   <td>否</td> 
   <td>自动切换时间间隔</td> 
   <td><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td>duration</td> 
   <td>number</td> 
   <td>500</td> 
   <td>否</td> 
   <td>滑动动画时长</td> 
   <td><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td>circular</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>否</td> 
   <td>是否采用衔接滑动</td> 
   <td><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td>vertical</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>否</td> 
   <td>滑动方向是否为纵向</td> 
   <td><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td>previous-margin</td> 
   <td>string</td> 
   <td>"0px"</td> 
   <td>否</td> 
   <td>前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值</td> 
   <td><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.9.0</a></td> 
  </tr> 
  <tr> 
   <td>next-margin</td> 
   <td>string</td> 
   <td>"0px"</td> 
   <td>否</td> 
   <td>后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值</td> 
   <td><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.9.0</a></td> 
  </tr> 
  <tr> 
   <td>snap-to-edge</td> 
   <td>boolean</td> 
   <td>"false"</td> 
   <td>否</td> 
   <td>当 swiper-item 的个数大于等于 2，关闭 circular 并且开启 previous-margin 或 next-margin 的时候，可以指定这个边距是否应用到第一个、最后一个元素</td> 
   <td><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">2.12.1</a></td> 
  </tr> 
  <tr> 
   <td>display-multiple-items</td> 
   <td>number</td> 
   <td>1</td> 
   <td>否</td> 
   <td>同时显示的滑块数量</td> 
   <td><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.9.0</a></td> 
  </tr> 
  <tr> 
   <td>easing-function</td> 
   <td>string</td> 
   <td>"default"</td> 
   <td>否</td> 
   <td>指定 swiper 切换缓动动画类型</td> 
   <td><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">2.6.5</a></td> 
  </tr> 
  <tr> 
   <td>bindchange</td> 
   <td>eventhandle</td> 
   <td>&nbsp;</td> 
   <td>否</td> 
   <td>current 改变时会触发 change 事件，event.detail = {current, source}</td> 
   <td><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td>bindtransition</td> 
   <td>eventhandle</td> 
   <td>&nbsp;</td> 
   <td>否</td> 
   <td>swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}</td> 
   <td><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">2.4.3</a></td> 
  </tr> 
  <tr> 
   <td>bindanimationfinish</td> 
   <td>eventhandle</td> 
   <td>&nbsp;</td> 
   <td>否</td> 
   <td>动画结束时会触发 animationfinish 事件，event.detail 同上</td> 
   <td><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.9.0</a></td> 
  </tr> 
 </tbody> 
</table>

**easing-function 的合法值**

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
   <th>最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>default</td> 
   <td>默认缓动函数</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>linear</td> 
   <td>线性动画</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>easeInCubic</td> 
   <td>缓入动画</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>easeOutCubic</td> 
   <td>缓出动画</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>easeInOutCubic</td> 
   <td>缓入缓出动画</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

## `change`事件 `source` 返回值 ##

从 [1.4.0][] 开始，`change`事件增加 `source`字段，表示导致变更的原因，可能值如下：

1.  `autoplay` 自动播放导致swiper变化；
2.  `touch` 用户划动引起swiper变化；
3.  其它原因将用空字符串表示。

## Bug & Tip ##

1.  `tip`: 如果在 `bindchange` 的事件回调函数中使用 `setData` 改变 `current` 值，则有可能导致 `setData` 被不停地调用，因而通常情况下请在改变 `current` 值前检测 `source` 字段来判断是否是由于用户触摸引起。

## 示例代码 ##

wxml代码如下：

//wxml代码：
    
    <swiper indicator-dots="{
       {indicatorDots}}" autoplay="{
       {autoplay}}" interval="{
       {interval}}" duration="{
       {duration}}" indicator-color="{
       {indicatorColor}}" indicator-active-color="{
       {indicatorActiveColor}}" circular="true">
       <block wx:for="{
       {banner}}">
          <swiper-item>
             <view class="{
       {item}}"></view>
          </swiper-item>
       </block>
    </swiper>
    
    //wxss代码
    
    swiper {
      height: 400rpx;
    }
    
    swiper-item view {
      height: 100%;
    }
    
    .bg_red {
      background-color: Pink;
    }
    
    .bg_green {
      background-color: PaleGreen;
    }
    
    .bg_blue {
      background-color: SkyBlue;
    }
    
    //js代码
    
    Page({
      data: {
        indicatorDots: true, //是否显示面板指示点
        vertical: false,//滑动方向是否为纵向
        autoplay: true,//是否自动切换
        interval: 3000,//自动切换时间间隔
        duration: 1000,//滑动动画时长
        indicatorColor: "#ffffff",//滑动圆点颜色  
        indicatorActiveColor: "#6abd18", //当前圆点颜色
        banner:['bg_red','bg_green','bg_blue'],
       }
    })

效果图如下：

![在这里插入图片描述][20201212141418307.gif]

### 1、自定义圆点颜色 ###

只需修改`indicator-color`和`indicator-active-color`参数值就可以了

### 2、自定义圆点位置 ###

//只需在wxss文件里加上这两行代码即可
    .wx-swiper-dots {
      position: relative;
      /* unset复原重置属性值 */
      left: unset !important;
      right: 0rpx;
    }
    
    .wx-swiper-dots .wx-swiper-dots-horizontal {
      margin-bottom: 0rpx;
    }

效果如下：

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5Mzk5OTY2_size_16_color_FFFFFF_t_70][] ###

### 3、自定义圆点形状 ###

//wxml代码：
    
    <view class="parent">
        <swiper bindchange="monitorCurrent" indicator-dots="{
       {indicatorDots}}" autoplay="{
       {autoplay}}" interval="{
       {interval}}" duration="{
       {duration}}" indicator-color="{
       {indicatorColor}}" indicator-active-color="{
       {indicatorActiveColor}}" circular="true" current="{
       {current}}">
            <block wx:for="{
       {banner}}" wx:key="*this">
                <swiper-item>
                 <view class="{
       {item}}"></view>
                </swiper-item>
            </block>
        </swiper>
        
      <view class="dots">
        <block wx:for="{
       {banner}}" wx:for-index="index" wx:key="*this">
          <view class="{
       {current==index?'active':''}}"></view>
        </block>
      </view>
      </view>
    
    //wxss代码：
    
    .parent {
      position: relative;
    }
    swiper-item view{
      width:100%;
      height:400rpx;
    }
    .bg_red {
      background-color: Pink;
    }
    
    .bg_green {
      background-color: PaleGreen;
    }
    
    .bg_blue {
      background-color: SkyBlue;
    }
    .dots {
      position: absolute;
      bottom: 30rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
    }
    
    .dots view {
      width: 15rpx;
      height: 15rpx;
      margin: 0 6rpx;
      border-radius: 15rpx;
      border:1rpx solid green;
      background-color: #fff;
    }
    
    .dots .active {
      width: 15rpx;
      height: 15rpx;
      border-radius: 15rpx;
      background-color: orange;
    }
    
    //js代码：
    
    Page({
      data: {
        indicatorDots: false,//关闭滑块轮播圆点
        autoplay: true,
        interval: 3000,
        duration: 1000,
        indicatorColor: "#ffffff",//滑动圆点颜色  
        indicatorActiveColor: "#6abd18", //当前圆点颜色
        banner:['bg_red','bg_green','bg_blue'],
        current: 0,
      },
       //监听轮播图的下标
       monitorCurrent: function (e) {
        // console.log(e.detail.current)
        let current = e.detail.current;
        this.setData({
          current: current
        })
      }
    })

效果图如下：

![20210128174712615.png][]

### 4、自定义长条状 ###

//wxml代码
     
    <view class="parent">
        <swiper bindchange="monitorCurrent" indicator-dots="{
       {indicatorDots}}" autoplay="{
       {autoplay}}" interval="{
       {interval}}" duration="{
       {duration}}" indicator-color="{
       {indicatorColor}}" indicator-active-color="{
       {indicatorActiveColor}}" circular="true" current="{
       {current}}">
            <block wx:for="{
       {banner}}" wx:key="*this">
                <swiper-item>
                 <view class="{
       {item}}"></view>
                </swiper-item>
            </block>
        </swiper>
        
      <view class="dots">
        <block wx:for="{
       {banner}}" wx:for-index="index" wx:key="*this">
          <view class="{
       {current==index?'active':''}}"></view>
        </block>
      </view>
    </view>
    
    //wxss代码
    
    .parent {
      position: relative;
    }
    swiper-item view{
      width:100%;
      height:400rpx;
    }
    .bg_red {
      background-color: Pink;
    }
    
    .bg_green {
      background-color: PaleGreen;
    }
    
    .bg_blue {
      background-color: SkyBlue;
    }
    .dots {
      position: absolute;
      bottom: 30rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
    }
    
    .dots view {
      width: 15rpx;
      height: 15rpx;
      margin: 0 6rpx;
      border-radius: 15rpx;
      background-color: #fff;
    }
    
    .dots .active {
      width: 35rpx;
      background-color: orange;
    }
    
    
    //js代码
    
    Page({
      data: {
        indicatorDots: false,//关闭滑块轮播圆点
        autoplay: true,
        interval: 3000,
        duration: 1000,
        indicatorColor: "#ffffff",//滑动圆点颜色  
        indicatorActiveColor: "#6abd18", //当前圆点颜色
        banner:['bg_red','bg_green','bg_blue'],
        current: 0,
       },
      //监听轮播图的下标
      monitorCurrent: function (e) {
        // console.log(e.detail.current)
        let current = e.detail.current;
        this.setData({
          current: current
        })
      }
    })

效果如下：

![在这里插入图片描述][20201212145936422.gif]

### 5、自定义带页码： ###

如果要显示页码的话，我们只需要使用轮播图的下标（从0开始）加上1来表示当前页，轮播图数组的长度来表示页码总数就好了

//wxml代码：
    
    <view class="parent">
          <swiper bindchange="monitorCurrent" indicator-dots="{
       {indicatorDots}}" circular="true"  autoplay="{
       {autoplay}}" current="{
       {current}}">
             <block wx:for="{
       {banner}}" wx:key="*this">
                <swiper-item>
                    <view class="{
       {item}}"></view>
                </swiper-item>
                </block>
          </swiper>
        
         <view class="dots">{
       {current+1}}/{
       {banner.length}}</view>
    </view>
    
    //wxss代码：
    
    .parent {
      position: relative;
    }
    swiper-item view{
      width:100%;
      height:400rpx;
    }
    .bg_red {
      background-color: Pink;
    }
    
    .bg_green {
      background-color: PaleGreen;
    }
    
    .bg_blue {
      background-color: SkyBlue;
    }
    .dots {
      position: absolute;
      right: 20rpx;
      bottom: 20rpx;
      width: 70rpx;
      height: 35rpx;
      line-height: 35rpx;
      text-align: center;
      border-radius: 20rpx;
      background-color: rgba(0, 0, 0, 0.4);
      color: #fff;
      font-size: 24rpx;
    }
    
    //js代码
    
    Page({
      data: {
        indicatorDots: false,
        autoplay: true,
        interval: 3000,
        duration: 1000,
        banner:['bg_red','bg_green','bg_blue'],
        current: 0,
      },
      //监听轮播图的下标
      monitorCurrent: function (e) {
        // console.log(e.detail.current)
        let current = e.detail.current;
        this.setData({
          current: current
        })
      }
    })

效果图如下：

![在这里插入图片描述][20201212152655823.gif]

### 6、自定义带计时器： ###

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

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

Page({
      data: {
        indicatorDots: false,
        interval: 3000,
        duration: 1000,
        banner:['bg_red','bg_green','bg_blue'],
        current: 0,
        //是否自动播放轮播图
        autoplay: false,
        //轮播图进度条的计时器
        progressNumInterval: null,
        //轮播图进度条的进度
        progressNum: 0
      },
      /**
       * 生命周期函数--监听页面显示
       */
      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)
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
        //关闭轮播图
        this.setData({
          autoplay: false
        })
        // 清理进度条的计时器
        clearInterval(this.data.progressNumInterval)
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
        //关闭轮播图
        this.setData({
          autoplay: false
        })
        // 清理进度条的计时器
        clearInterval(this.data.progressNumInterval)
      }
    })

wxss:

.parent {
      position: relative;
    }
    swiper-item view{
      width:100%;
      height:400rpx;
    }
    .bg_red {
      background-color: Pink;
    }
    
    .bg_green {
      background-color: PaleGreen;
    }
    
    .bg_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 {
      width: 45rpx;
      height: 8rpx;
      border-radius: 8rpx;
      background-color: rgba(255, 255, 255, 0.5);
      margin-left: 10rpx;
    }
    
    .progress-line {
      background-color: #E42C2C;
      height: 8rpx;
      border-radius: 8rpx;
    }

[swiper-item]: https://developers.weixin.qq.com/miniprogram/dev/component/swiper-item.html
[1.4.0]: https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html
[20201212141418307.gif]: /images/20221119/14d4fb86e6d742d38d9145193305642e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5Mzk5OTY2_size_16_color_FFFFFF_t_70]: /images/20221119/619a7c868a6743cfaea053e633a42c3f.png
[20210128174712615.png]: /images/20221119/eaccb59ae3724910929349c5bcb7fbf1.png
[20201212145936422.gif]: /images/20221119/82b259e95eaf4184b7113235995636e7.png
[20201212152655823.gif]: /images/20221119/3f9edfc0487046349dca31b1e8f8c207.png