案例4.4 swiper和switch组件学习笔记

一、案例概述本案例设计一个小程序演示 swiper 和 switch 组件的功能和使用方法。小程序运行后利用 switch 组件设置 swiper 组件的属性值从而实现 swiper 组件的各种播放效果。swiper 组件是微信小程序中用于实现轮播图滑动视图的核心组件常用于首页 Banner、图片轮播、公告展示等场景。switch 组件则是一个开关选择器用于在两种状态之间进行切换。本案例将两者结合通过 switch 组件动态控制 swiper 组件的播放行为帮助学习者理解组件之间的数据联动与事件绑定机制。通过本案例的学习读者可以掌握以下知识点swiper 组件的基本结构与常用属性。switch 组件的基本用法与事件绑定。如何通过 data 数据绑定实现组件间的联动控制。wx:for 循环渲染在 swiper-item 中的应用。二、实现效果初始界面中swiper 组件元素显示红色背景和“井冈山精神”四个字指示点 switch 组件被选中其它 switch 组件没有选中此时可以手动播放 swiper 组件。选中自动播放 switch 组件后swiper 组件可以自动播放。此时无需手动滑动swiper 会按照设定的时间间隔自动切换滑动项适合用于广告轮播等需要无人值守的场景。选中衔接滑动 switch 组件后可以衔接滑动。所谓衔接滑动是指播放完一轮后不会退回到初始位置播放而是沿着同一方向进入下一轮播放。这一特性让轮播过程更加流畅自然避免了从末尾跳回开头时的突兀感。选中竖向 switch 组件后滑动方向为垂直方向。默认情况下 swiper 组件是横向滑动开启竖向模式后滑动项将从上到下排列用户通过上下滑动进行切换适用于纵向列表式的轮播需求。四个 switch 组件相互独立可以组合使用。例如同时开启自动播放和衔接滑动即可实现循环自动轮播的效果同时开启竖向和自动播放则可实现纵向自动轮播。这种组合方式展示了组件属性之间的灵活搭配能力。三、新建项目新建一个不使用云服务、不使用模板的项目。在微信开发者工具中点击“新建项目”按钮填写项目名称和目录选择“不使用云服务”和“不使用模板”即可创建一个空白的小程序项目。项目创建完成后默认会生成以下文件结构app.js小程序逻辑入口文件。app.json小程序全局配置文件。app.wxss小程序全局样式文件。pages/index/index.wxml首页结构文件。pages/index/index.wxss首页样式文件。pages/index/index.js首页逻辑文件。pages/index/index.json首页配置文件。本案例的核心代码集中在 pages/index 目录下的 index.wxml、index.wxss 和 index.js 三个文件中app.wxss 用于设置全局样式。四、编写 index.wxml 文件页面中包含了一个 swiper 组件其常用属性如下属性说明indicator-dots是否显示面板指示点autoplay是否自动切换circular是否采用衔接滑动vertical滑动方向是否为纵向interval自动切换时间间隔单位为毫秒duration滑动动画时长单位为毫秒在 swiper 组件中放置了 swiper-item 组件通过 wx:for 循环放置了 3 个 swiper-item 组件。注意swiper 组件只可放置 swiper-item 组件swiper-item 组件仅可放置在 swiper 组件中。swiper 组件的核心结构如下swiper indicator-dots{{indicatorDots}} autoplay{{autoplay}} circular{{circular}} vertical{{vertical}} interval{{interval}} duration{{duration}} swiper-item wx:for{{items}} wx:keyindex view classitem {{item}}{{item}}/view /swiper-item /swiper页面中包含四个 switch 组件分别绑定了事件函数分别控制 swiper 组件指示点的显示、是否自动播放、是否衔接滑动、是否竖向滑动。switch 组件的结构如下view classswitch-group view classswitch-item text指示点/text switch checked{{indicatorDots}} bindchangechangeIndicatorDots/ /view view classswitch-item text自动播放/text switch checked{{autoplay}} bindchangechangeAutoplay/ /view view classswitch-item text衔接滑动/text switch checked{{circular}} bindchangechangeCircular/ /view view classswitch-item text竖向/text switch checked{{vertical}} bindchangechangeVertical/ /view /view每个 switch 组件通过 checked 属性绑定对应的数据字段通过 bindchange 事件绑定对应的处理函数。当用户切换开关状态时会触发对应的事件函数从而更新 data 中的数据进而改变 swiper 组件的属性值。五、编写 index.wxss 文件编写样式文件设置 swiper 组件及滑动项的背景色、文字样式等外观效果。示例样式如下swiper { height: 300rpx; } .item { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 40rpx; color: #ffffff; } .item-red { background-color: #e64340; } .item-green { background-color: #09bb07; } .item-blue { background-color: #10aeff; } .switch-group { margin-top: 30rpx; padding: 0 30rpx; } .switch-item { display: flex; align-items: center; justify-content: space-between; padding: 20rpx 0; border-bottom: 1rpx solid #eeeeee; }上述样式中swiper 组件设置了固定高度滑动项使用 flex 布局实现文字居中显示并通过不同的背景色区分三个滑动项。switch 组件区域使用列表式布局每个开关项之间用分隔线隔开整体界面清晰美观。六、编写 app.wxss 文件编写全局样式文件设置页面整体布局与通用样式。七、编写 index.js 文件编写逻辑文件定义四个 switch 组件的事件处理函数通过 data 数据绑定动态控制 swiper 组件的属性值实现指示点显示、自动播放、衔接滑动和竖向滑动等效果。