2021-11-20、使用switch组件控制swiper组件

1、案例描述

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

2、实现过程

2.1、代码展示

• wxml

  switch and swiper
  
    
      
        
      
    
  
  
    
      指示点
      
    
    
      自动播放
      
    
    
      循环播放
      
    
    
      竖向
      
    
  

• 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的过去分词和过去式，检查，控制）