前言swiper和switch是微信小程序中常用的两个组件。swiper用于实现滑动视图容器switch用于实现开关选择器。本文通过一个案例演示swiper和switch组件的功能和使用方法。一、案例描述设计一个小程序演示swiper和switch组件的功能和使用方法。利用switch组件设置swiper组件的属性值从而实现swiper组件的各种播放效果。二、swiper组件2.1 基本用法swiper是滑块视图容器只能放置swiper-item组件swiperindicator-dots{{indicatorDots}}autoplay{{autoplay}}circular{{circular}}vertical{{vertical}}interval2000duration500swiper-itemwx:for{{items}}view{{item.text}}/view/swiper-item/swiper2.2 swiper属性说明属性说明indicator-dots是否显示面板指示点autoplay是否自动切换circular是否采用衔接滑动vertical滑动方向是否为纵向interval自动切换时间间隔单位毫秒duration滑动动画时长单位毫秒2.3 swiper-itemswiper-item是swiper的子组件只能放在swiper中。通过wx:for循环可以放置多个swiper-item。三、switch组件3.1 基本用法switch是开关选择器通过bindchange绑定事件处理函数switchchecked{{indicatorDots}}bindchangechangeIndicatorDots/指示点switchchecked{{autoplay}}bindchangechangeAutoplay/自动播放switchchecked{{circular}}bindchangechangeCircular/衔接滑动switchchecked{{vertical}}bindchangechangeVertical/竖向3.2 事件处理每个switch组件绑定了事件函数通过e.detail.value获取开关状态调用setData更新swiper的属性changeIndicatorDots:function(e){this.setData({indicatorDots:e.detail.value})},changeAutoplay:function(e){this.setData({autoplay:e.detail.value})},changeCircular:function(e){this.setData({circular:e.detail.value})},changeVertical:function(e){this.setData({vertical:e.detail.value})}四、实现效果4.1 初始状态指示点switch选中其它switch未选中可以手动滑动swiper。4.2 自动播放选中自动播放switch后swiper自动切换间隔2000毫秒。4.3 衔接滑动选中衔接滑动后播放完一轮不会退回而是沿同一方向进入下一轮。4.4 竖向滑动选中竖向后滑动方向变为垂直方向。五、扩展实践增加滑动项原始案例有3个swiper-item再增加1个共4个滑动项items:[{text:井冈山精神,color:#ff0000},{text:延安精神,color:#00ff00},{text:西柏坡精神,color:#0000ff},{text:长征精神,color:#ff8c00}]新增的第四项为长征精神背景色为橙色。六、总结swiper组件用于实现滑动视图只能包含swiper-itemswitch组件用于实现开关选择通过bindchange绑定事件数据绑定switch的值通过setData更新swiper的属性wx:for循环可以动态生成多个swiper-itemswiper的属性可以通过switch动态控制实现交互效果如果觉得本文对你有帮助欢迎点赞收藏有问题可以在评论区交流。