微信小程序案例2-2：本地生活

一、运行效果

• 轮播图区域与九宫格区域
  

二、知识储备

（一）swiper与swiper-item组件

1、swiper组件

（1）功能描述

• 滑块试图容器。其中只可放置swipe-item组件，否则会导致未定义的行为。

（2）属性说明

属性	类型	默认值	必填	说明	最低版本
indicator-dots	boolean	false	否	是否显示面板指示点	1.0.0
indicator	color	rgba(0,0,0,3)	否	指示点颜色	1.1.0
indicator-active-color	color	#000000	否	当前选中的指示点颜色	1.1.0
autoplay	boolean	false	否	是否自动切换	1.0.0
current number	当前所在滑块的index，默认为0				1.0.0
interval	number	500	否	自动切换时间间隔	1.0.0
circular	boolean	false	否	是否采用衔接滑动	1.0.0

2、swiper-item组件

（1）功能描述

• 仅可放置在swiper组件中，宽高自动设置为100%。

（2）属性说明

属性	类型	默认值	必填	说明	最低版本
item-id	string		否	该swiper-item的标识符	1.9.0
skip-hidden-item-layout	boolean	false	否	是否跳过未显示的滑块布局，设为true可优化复杂情况下的滑动性能，但丢失隐藏状态滑块的布局信息	1.9.0

3、基本语法

• swiper组件通过<swiper>标签定义，swiper-item通过<swiper-item>标签定义。
  `

<swiper>
<swiper-item>1</swiper-item>
<swiper-item>2</swiper-item>
<swiper-item>3</swiper-item>
</swiper>

• swiper组件为外层容器，内层有3个swiper-item组件，表示当前滑块视图内容一共有3项。滑块视图内容在初始状态下只显示第1项，向左滑动显示第2项，再向右滑动可以返回第1项。

4、案例演示

• 页面结构实例代码

<swiper class="swiper-container" current="2" indicator-dots="true" indicator-color="yellow" indicator-active-color="red" autoplay="true" interval="3000" circular="true">