小程序开发基础-swiper 滑块视图容器

痛定思痛。 2021-09-16 05:58 376阅读 0赞

![标题图][1240]

小编 / 达叔小生

参考官方文档：[https://developers.weixin.qq.com/miniprogram/dev/component/][https_developers.weixin.qq.com_miniprogram_dev_component]

## 小程序开发基础-swiper 滑块视图容器 ##

根据官方文档，在自己的程序上运行，并打进代码的效果图，`swiper`滑块视图容器，是用来展示图片，控制图片的

![效果图][1240 1]

`swiper`为滑块视图容器，其实就是轮播图的效果。

代码中`indicator-dots="{ {indicatorDots}}"`的效果是用来显示指示点的，就是图片中下方的小圆圈。

`autoplay="{ {autoplay}}"`为是否可以自动切换的效果，如果不设置，那就只有一张图片显示到界面中。

`current="0"`为当前显示在哪个滑块，为啥为`0`，因为默认值为`0`，可知从零开始算起嘛。

`interval="{ {interval}}"`为自动切换时间的间隔，表示每张图片显示到它设定的时间就开始切换到下一个视图即图片，如果设定为`3000`即`3`秒，那么图片展示到`3`秒后，进入到下一个图片。

`duration="{ {duration}}"`为滑动动画时长，怎么理解呢？就是第一张图片切换到第二张图片的时长，即第一张滑出，第二张滑入到完，所用的时间长而已。

`circular="{ {circular}}"`为是否采用衔接滑动，怎么理解呢？衔接？如果这个属性不设定，那么如果轮播图是三张图片，第一张展示到第三张即最后展示完，它会返回到第一张，那样的效果会不好看。如果设定了该属性，且为`true`的话，那么展示完后，直接进入到第一张图的界面。

<swiper indicator-dots="{ { indicatorDots}}" autoplay="{ { autoplay}}" interval="{ { interval}}" duration="{ { duration}}" circular='{ { circular}}' current="0"> // 用于展示轮播图效果 <block wx:for="{ { imgUrls}}"> <swiper-item> <image src="{ { item}}" class="slide-image" width="355" height="150" /> </swiper-item> </block> </swiper> // 用于定义是否显示面板指示点 <button bindtap="changeIndicatorDots"> indicator-dots </button> // 用于定义是否自动切换 <button bindtap="changeAutoplay"> autoplay </button> // 滑动进度，这个按钮效果用于更改自动切换时间间隔 <slider bindchange="intervalChange" show-value min="500" max="2000" /> interval // 滑动进度，这个按钮效果用于更改滑动动画时长 <slider bindchange="durationChange" show-value min="1000" max="10000" /> duration

#### swiper的属性 ####

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>indicator-dots</td> 
   <td>表示<strong>显示面板的指示点</strong>，图片下的小圆圈</td> 
  </tr> 
  <tr> 
   <td>indicator-color</td> 
   <td>表示<strong>指示点的颜色</strong></td> 
  </tr> 
  <tr> 
   <td>indicator-active-color</td> 
   <td>表示<strong>当前选中的指示点颜色</strong></td> 
  </tr> 
  <tr> 
   <td>autoplay</td> 
   <td>表示为<strong>是否自动切换</strong></td> 
  </tr> 
  <tr> 
   <td>current</td> 
   <td>表示当前所在的滑块 <code>index</code></td> 
  </tr> 
  <tr> 
   <td>current-item-id</td> 
   <td>当前所在滑块的 <code>item-id</code>，不能与<code>current</code>被同时指定</td> 
  </tr> 
  <tr> 
   <td>interval</td> 
   <td>表示<strong>自动切换时间间隔</strong></td> 
  </tr> 
  <tr> 
   <td>duration</td> 
   <td>表示<strong>为滑动动画时长</strong></td> 
  </tr> 
  <tr> 
   <td>circular</td> 
   <td>表示<strong>是否采用衔接滑动</strong></td> 
  </tr> 
  <tr> 
   <td>previous-margin</td> 
   <td>表示<strong>前边距</strong>，用于露出前一项的一小部分，接受 <code>px</code> 和 <code>rpx</code> 值，就是在整块模板中露出前一项的一小部分</td> 
  </tr> 
  <tr> 
   <td>next-margin</td> 
   <td>表示<strong>后边距</strong>，与上述同理</td> 
  </tr> 
  <tr> 
   <td>display-multiple-items</td> 
   <td>表示<strong>显示的滑块数量</strong>，就是显示多少张图在界面上，默认为<code>1</code>，如果定位<code>2</code>，那么就两张图片设定在界面上，界面各自分一半</td> 
  </tr> 
  <tr> 
   <td>skip-hidden-item-layout</td> 
   <td>表示<strong>是否跳过未显示的滑块布局</strong>，设为 <code>true</code> 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息</td> 
  </tr> 
  <tr> 
   <td>bindchange</td> 
   <td><code>current</code> 改变时会触发 <code>change</code> 事件，<code>event.detail = {current: current, source: source}</code></td> 
  </tr> 
  <tr> 
   <td>bindanimationfinish</td> 
   <td>动画结束时会触发 <code>animationfinish</code> 事件，<code>event.detail</code> 同上</td> 
  </tr> 
 </tbody> 
</table>

//index.js
    Page({
      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: true,
        circular: true,
        autoplay: true,
        interval: 2000,
        duration: 1000
      },
      changeIndicatorDots: function(e) { 
        this.setData({
          indicatorDots: !this.data.indicatorDots
        })
      },
      changeAutoplay: function(e) { 
        this.setData({
          autoplay: !this.data.autoplay
        })
      },
      intervalChange: function(e) { 
        this.setData({
          interval: e.detail.value
        })
      },
      durationChange: function(e) { 
        this.setData({
          duration: e.detail.value
        })
      }
    })

在`js`中图片资源来源于官方文档，四种改变效果函数，`changeIndicatorDots`（显示指示点），`changeAutoplay`（是否自动轮播），`intervalChange`（展示效果时长），`durationChange`（切换时间时长）

/**index.wxss**/
    .slide-image{
      width: 100%;
    }

`wxss`只是让图片宽度占满父元素而已。

#### 注意事项 ####

![注意事项.png][.png]

检测 `source` 字段判断是否由于用户触摸引起 ^ v ^

## 开源github分享 ##

**[Wechat\_small\_program\_Share][Wechat_small_program_Share]**  
微信小程序分享��  
`Github` 欢迎 `Star、Fork`

## 结语 ##

*  本文主要讲解 **小程序开发基础-swiper 滑块视图容器**
 *  下面我将继续对其他知识 深入讲解 ，有兴趣可以继续关注
 *  小礼物走一走 or 点赞

![送❤][1240 2]

[1240]: /images/20210724/dc7da2a25d4a4b309346e2521596488e.png
[https_developers.weixin.qq.com_miniprogram_dev_component]: https://developers.weixin.qq.com/miniprogram/dev/component/
[1240 1]: /images/20210724/34ed0a74a0fa4964a890bd8bfae8b633.png
[.png]: /images/20210724/66bab5bb8a58446691ea10bc9dde2e22.png
[Wechat_small_program_Share]: https://github.com/huangguangda/Wechat_small_program_Share
[1240 2]: /images/20210724/9ecc7f7f49f544328e94259320c63f1f.png