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

一、运行效果

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

二、知识储备

（一）swiper与swiper-item组件

1、swiper组件

（1）功能描述

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

（2）属性说明

2、swiper-item组件

（1）功能描述

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

（2）属性说明

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">
    <swiper-item class="item">1</swiper-item>
    <swiper-item class="item">2</swiper-item>
    <swiper-item class="item">3</swiper-item>
</swiper>

• 页面样式示例代码

.swiper-container {
   
    height: 100px;
    background-color: thistle;
}

.item {
   
    line-height: 100px;
    align-content: center;
    font-size: xx-large