首页/新闻资讯/正文详情

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

发布时间:2026/9/24 7:24:18 来源:云帆数科 栏目:资讯中心
案例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 组件的属性值实现指示点显示、自动播放、衔接滑动和竖向滑动等效果。

相关推荐

京东方战略进阶:第N曲线赋能三大新赛道落地生根
京东方战略进阶:第N曲线赋能三大新赛道落地生根

文:杜杰 编辑:cc孙聪颖 企业史学家阿尔弗雷德・钱德勒曾在《战略与结构》中确立了一个被产业界长期采信的洞见:战略先行,结构跟进;真正长寿的制造企业,必须在环境转向之前,就为自身预留出适配新… · 2026/9/24 7:24:12

Swagger Codegen Java Jersey1 客户端 Category 模型参考:从 Swagger 定义到生成代码的完整链路
Swagger Codegen Java Jersey1 客户端 Category 模型参考:从 Swagger 定义到生成代码的完整链路

开发工具代码生成API设计 【免费下载链接】swagger-codegen swagger-codegen contains a template-driven engine to generate documentation, API clients and server stubs in different languages by parsing your OpenAPI / Swagger definition. 项目地址: http… · 2026/9/24 7:24:12

Agent 工具越多越好吗?如何让模型准确选到该用的工具
Agent 工具越多越好吗?如何让模型准确选到该用的工具

刚开始做 Agent 时,我们通常会不断给它加工具。 查天气,加一个工具;搜网页,加一个工具;查数据库,再加一个;发邮件、读文件、调用业务 API……最后一个 Agent 身上可能挂着几十个,甚… · 2026/9/24 7:24:06

陪诊师证哪家培训机构靠谱?从报名学习到考试拿证,报考全攻略
陪诊师证哪家培训机构靠谱?从报名学习到考试拿证,报考全攻略

近两年,陪诊师证的报考热度持续上升,想考的人不少,但绝大多数人卡在了同一个问题上:培训机构那么多,到底哪家靠谱?网上搜一圈,广告铺天盖地、说法互相矛盾,越看越不知道信谁。本文不… · 2026/9/24 12:31:54

RMBench: Memory-Dependent Robotic Manipulation Benchmarkwith Insights into Policy Design
RMBench: Memory-Dependent Robotic Manipulation Benchmarkwith Insights into Policy Design

研究背景:现有机器人操纵策略,如 π0.6、RDT2,已经具备较强的精细操作能力,但大多面向短时任务,并依赖当前观测或固定长度的历史窗口,这实际上近似假设任务是马尔可夫任务(当前状态已经包含做下… · 2026/9/24 12:31:54

GaN快充批量失效元凶:X电容放电芯片可靠性剖析
GaN快充批量失效元凶:X电容放电芯片可靠性剖析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/24 12:31:42

MOS管正确打开方式:从选型驱动到热设计,避开炸管陷阱
MOS管正确打开方式:从选型驱动到热设计,避开炸管陷阱

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/24 12:31:42

PX4、Pixhawk、ArduPilot、APM:开源飞控四概念彻底讲清
PX4、Pixhawk、ArduPilot、APM:开源飞控四概念彻底讲清

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/24 12:31:42

ATF-54143低噪声放大器ADS设计全流程:从模型导入到版图联合仿真
ATF-54143低噪声放大器ADS设计全流程:从模型导入到版图联合仿真

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/24 12:31:42

基于YOLOv8的渔船作业监控系统:从环境搭建到边缘部署全流程
基于YOLOv8的渔船作业监控系统:从环境搭建到边缘部署全流程

简介:这是一套面向计算机、人工智能、自动化等专业学生与教师的毕业设计级项目资源,围绕YOLOv8实现渔船作业监控系统,可用于毕设、课程设计、大作业或项目立项演示。压缩包共97个文件,约24.21MB,以70个Python源码文件为… · 2026/9/24 0:00:13

1D-CNN时间序列建模实战:从Conv1d原理到工业落地
1D-CNN时间序列建模实战:从Conv1d原理到工业落地

简介:面向时间序列数据建模的一维卷积神经网络完整实现,适合深度学习入门者及需要快速验证时序模型的研究者,能够从音频、文本、传感器或股价等序列中挖掘局部特征与时间依赖。压缩包体积很小,只有3KB,内含3个Python脚… · 2026/9/24 0:00:26

柔软的L:汉语语流中被忽视的舌肌张力控制
柔软的L:汉语语流中被忽视的舌肌张力控制

1. 这个“L”不是字母表里的L,而是舌尖上的L最近在几个方言群和语音教学社群里,反复看到有人发一句:“也说字母L:柔软的长舌”。初看以为是英语发音课笔记,点开才发现全是方言爱好者、播音系学生、语言康复师甚至戏曲演… · 2026/9/24 0:00:44

了解更多?预约专属演示

我们的顾问将为您一对一讲解产品与方案

企业微信二维码