《微信小程序开发》课件——第2章 微信小程序页面制作_67-106.pdf

02【案例2-2】个人信息

案例分析

“本地生活”微信小程序展示了本地生活的图片信

息和美食、装修等分类信息，该页面分为上下两部

分，上半部分为轮播图区域，下半部分为九宫格区

域。

知识储备

1.swiper和swiper-item组件

先定一个小

目标！

掌握swiper和swiper-item组件的使用

方法，能够灵活运用swiper和swiper-

item组件完成轮播图的制作

知识储备

1.swiper和swiper-item组件

什么是swiper和

swiper-item组件呢？

知识储备

1.swiper和swiper-item组件

swiper组件表示滑块视图容器，用于创建一块

可以滑动的区域。swiper组件内部需要嵌套

swiper-item组件，swiper-item组件表示滑块

视图内容。

swiper组件的默认高度为150px，默认宽度为

100%。swiper-item组件的初始高度和初始宽

度都为100%。

知识储备

1.swiper和swiper-item组件

swiper组件通过swiper标签定义，swiper-item组件通过swiper-item标签定义。

swiper

swiper-item1/swiper-item

swiper-item2/swiper-item

swiper-item3/swiper-item

/swiper

swiper组件为外层容器，内层有3个swiper-item组件，表示当前滑块视图内容一共有3项。

滑块视图内容在初始状态下只显示第1项，向左滑动显示第2项，再向右滑动可以返回第1项。

知识储备

1.swiper和swiper-item组件

swiper组件的常用属性如下表所示。

属性类型说明

indicator-dotsboolean是否显示面板指示点

indicator-colorcolor指示点颜色

indicator-active-colorcolor当前选中的指示点颜色

autoplayboolean是否自动切换

currentnumber当前所在滑块的index，默认为0

intervalnumber自动切换时间间隔

circularboolean是否采用衔接滑动

知识储备

1.swiper和swiper-item组件

演示swiper组件的常用属性

n实现轮播图3秒自动无缝切换效果，同时显示面板指示点，并设置指示点颜色为黄色、