1、案例描述

使用switch组件控制swiper组件，实现轮播图的所有效果

2、实现过程

2.1、代码展示

• wxml

<!--pages/kj/demo111-template/index.wxml-->
<view class="box">
  <view class="title">switch and swiper</view>
  <swiper indicator-dots="{{indicator_dots}}" autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}"
    interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{background}}" wx:key="*this">
      <swiper-item>
        <view class="{{item}}"></view>
      </swiper-item>
    </block>
  </swiper>
  <view class="switch_component">
    <view class="switch_item">
      <text class="text">指示点</text>
      <switch checked="{{indicator_dots}}" bindchange="change_indicator_dots"></switch>
    </view>
    <view class="switch_item">
      <text class="text">自动播放</text>
      <switch checked="{{autoplay}}" bindchange="change_autoplay"></switch>
    </view>
    <view class="switch_item">
      <text class="text">循环播放</text>
      <switch checked="{{circulr}}" bindchange="change_circular"></switch>
    </view>
    <view class="switch_item">
      <text class="text">竖向</text>
      <switch checked="{{vertical}}" bindchange="change_vertical"></switch>
    </view>
  </view>
</view>

• wxss

/* pages/kj/demo111-template/index.wxss */
.bc_red{
    width: 100%;
    height: 150px;
    background-color: red;
}
.bc_green{
    width: 100%;
    height: 150px;
    background-color: green;
}
.bc_blue{
    width: 100%;
    height: 150px;
    background-color: blue;
}
.switch_component{
    display: flex;
    flex-direction: column;
    
}
.switch_item{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    border-bottom: 1px solid black;
    margin: 10px;
    padding: 5px;
}
.text{
    flex-grow: 1;
}

• js

// pages/kj/demo111-template/index.js
var background = ['bc_red','bc_green','bc_blue'];
var indicator_dots = true;
var autoplay = false;
var circular = false;
var vertical = false;

Page({

  data: {
    background : background,
    indicator_dots : indicator_dots,
    autoplay : autoplay,
    circular : circular,
    vertical : vertical,
    interval : 2000,
    duration : 500,
  },
  change_indicator_dots:function(e){
    indicator_dots = !indicator_dots;
    this.setData({
      indicator_dots : indicator_dots
    })
  },
  change_autoplay:function(e){
    autoplay = !autoplay;
    this.setData({
      autoplay : autoplay
    })
  },
  change_circular:function(e){
    circular = !circular;
    this.setData({
      circular : circular
    })
  },
  change_vertical:function(e){
    vertical = !vertical;
    this.setData({
      vertical : vertical
    })
  },
  
})

2.2、结果展示

结果展示.png

3、知识汇总

知识要点.png swiper组件属性.png swiper属性续表.png switch组件.png

4、踩坑说明

• swiper组件显示不出来：错误原因，对page当中的data理解不到位，把数组定义到了page外面，但无法渲染到视图层。如果要在页面加载后把js数据传递到视图层，一定要在js的data中把数据定义。

//导致视图层不渲染的代码：
// pages/kj/demo111-template/index.js
var background = ['bc_red','bc_green','bc_blue']
Page({
  data: {
    indicator_dots : true,
    autoplay : false,
    circular : false,
    vertical : false,
    interval : 2000,
    duration : 1000,
  }  
})

//修改后的代码：
// pages/kj/demo111-template/index.js
var background = ['bc_red','bc_green','bc_blue']
Page({
  data: {
    background : background,
    indicator_dots : true,
    autoplay : false,
    circular : false,
    vertical : false,
    interval : 2000,
    duration : 1000,
  }
})

• js代码中，switch中开关绑定的变量和swiper中对应属性绑定的变量保持一致，这样就可以用开关来控制swiper了。
• 一些组件属性容易忘记总结如下：
  swiper：（猛击者）
  indicator（指示信号）dots（小圆点复数）
  switch：（开关，转换，交换）
  checked（check的过去分词和过去式，检查，控制）