企业官网建设流程全解析

一、实验目的

掌握小程序swiper轮播组件和switch开关组件的功能与使用方法。通过switch开关动态修改swiper组件属性，控制轮播图是否自动播放、是否循环播放、是否显示指示点，实时切换轮播播放效果。

二、相关知识点

1. swiper 组件：小程序轮播图组件，常用属性：
   • autoplay：布尔值，是否自动切换
   • circular：布尔值，是否采用循环滑动
   • indicator-dots：布尔值，是否显示面板指示点
   • interval：自动切换时间间隔
2. switch 组件：开关选择器，bindchange监听开关状态变化，返回true/false，用来控制 swiper 的属性。
3. 动态属性绑定：将 data 中的变量绑定到 swiper 属性，修改变量即可实时改变组件效果。

三、项目文件结构

四、完整代码实现

1. index.wxml

2. index.js

3. index.wxss

4. index.json

五、运行测试说明

1. 自动播放开关：打开，轮播图每 2 秒自动切换；关闭，停止自动轮播。
2. 循环播放开关：开启后，滑到最后一张可以无缝切回第一张；关闭则最后一张不能继续右滑。
3. 显示指示点开关：控制轮播底部小圆点是否显示。
4. 可以自由组合多个开关，同时开启自动播放 + 循环播放 + 指示点，观察轮播效果。

六、实验总结

本次实验使用swiper实现轮播图效果，switch作为布尔型开关组件监听用户操作。通过bindchange捕获开关状态，修改页面 data 数据，利用数据绑定动态更新 swiper 组件属性。页面数据驱动视图，不需要手动操作 DOM，修改数据即可实时改变组件展示效果，理解小程序数据双向绑定的核心思想。