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

一、运行效果

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

二、知识储备

（一）swiper与swiper-item组件

1、swiper组件

（1）功能描述

• 滑块试图容器。其中只可放置swipe-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>
1
2
3
4
5

• 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>

1
2
3
4
5
6

• 页面样式实例代码

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

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

1
2
3
4
5
6
7
8
9
10
11

• 预览效果
  

（二）text组件

• 在HTML中，一般通过<span>标签定义行内文本，而在微信小程序中，则可以通过text组件定义行内文本。需要注意的是，text组件内部只能嵌套text组件。

1、常用属性

2、案例演示

• 使用user-select属性实现长按选中文本的效果

<text user-select="true">欢迎使用微信小程序</text>
1

• 手指长按前
  
• 手指长按后
  
• 使用鼠标模拟手指长按文本之后的选中效果，此处通过长按选中了“程序”文本。如果在微信客户端运行的小程序中长按文本，会出现“复制”选项，可以实现长按复制文本的效果。

（三）Flex布局

• 目标：掌握Flex布局的使用方法，能够使用Flex布局的相关属性完成页面布局

1、什么是Flex布局

在微信小程序中可以使用Flex布局实现自适应页面。Flex布局又称为弹性盒（Flexible Box）布局，它为盒子模型提供了很强的灵活性，任何一个容器都可以指定为Flex布局。

2、基本概念

（1）Flex容器

• 采用Flex布局的元素，称为Flex容器（简称容器）。

（2）Flex项目

• Flex容器的所有子元素自动成为容器成员，称为Flex项目（简称项目）。

（3）轴

• Flex容器内有两根轴：主轴（Main Axis）和交叉轴（Cross Axis），默认情况下主轴为水平方向，交叉轴为垂直方向，项目默认沿主轴排列。
• 若想使用Flex布局，首先要设置父元素的display属性为flex，表示将父元素设置为容器，然后就可以使用容器和项目的相关属性了。

3、容器常用属性

4、项目常用属性

5、flex-direction属性

• flex-direction属性用于设置主轴方向，通过设置主轴方向可以规定项目的排列方向，它有以下4个常用的可选值。

• 页面结构示例代码

<view class="demo">
    <view>中国</view>
    <view>四川</view>
    <view>泸州</view>
</view>
1
2
3
4
5

• 页面样式实例代码

.demo {
    display: flex;
    flex-direction: column-reverse;
}
1
2
3
4

• 预览效果
  

6、justify-content属性

• justify-content属性用于设置项目在主轴方向上的对齐方式，能够分配项目之间及其周围多余的空间，它有以下5个常用的可选值。

• 页面结构实例代码

<view class="demo">
    <view>中国</view>
    <view>四川</view>
    <view>泸州</view>
</view>
1
2
3
4
5

• 页面样式实例代码

.demo {
    background-color: silver;
    display: flex;   
    justify-content: space-between;
}
1
2
3
4
5

• 预览效果
  

7、align-items属性

• align-items属性用于设置项目在交叉轴上的对齐方式，它有以下6个常用的可选值。

<view class="demo">
    <view>中国</view> 
    <view>四川</view>
    <view>泸州</view>
</view>
1
2
3
4
5

-页面样式实例代码

.demo {
    background-color: silver;
    display: flex;   
    justify-content: space-between;    
    height: 100px;
    align-items: center;
}
1
2
3
4
5
6
7

• 预览效果
  

三、实现步骤

（一）创建项目

• 项目名称：本地生活
• 模板选择：不使用模板
  
  单击【确定】按钮
  

（二）创建页面

• 在app.json里配置pages/grid/grid页面，手动删除index目录，设置导航栏
  

（三）准备图片素材

• 在项目根目录创建images目录，拷贝项目所需图片素材
  

（四）编写页面结构

1、编写轮播区域页面结构

• 轮播图有指示点面板，自动轮播，时间间隔3000毫秒
  

<!--pages/grid/grid.wxml-->
<!--轮播图区域-->
<swiper indicator-dots="true" indicator-color="blue" indicator-active-color="red" autoplay="true" circular="true" interval="3000">
    <swiper-item>
        <view class="item">
            <image src="/images/swiper01.png" mode="aspectFill" style="width: 100%; height: 100%;" />
        </view>
    </swiper-item>
    <swiper-item>
        <view class="item">
            <image src="/images/swiper02.png" mode="aspectFill" style="width: 100%; height: 100%;" />
        </view>
    </swiper-item>
    <swiper-item>
        <view class="item">
            <image src="/images/swiper03.png" mode="aspectFill" style="width: 100%; height: 100%;" />
        </view>
    </swiper-item>
</swiper>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

• 预览效果（看不见图片，可以看见指示点在循环）
  

2、编写九宫格区域页面结构

• view组件里嵌套9个view组件
  

<!--九宫格区域-->
<view class="grids">
    <view class="grid-item">
        <image src="/images/food.png" />
        <text>美食</text>
    </view>
    <view class="grid-item">
        <image src="/images/fitup.png" />
        <text>装修</text>
    </view>
    <view class="grid-item">
        <image src="/images/bath.png" />
        <text>洗浴</text>
    </view>
    <view class="grid-item">
        <image src="/images/car.png" />
        <text>汽车</text>
    </view>
    <view class="grid-item">
        <image src="/images/sing.png" />
        <text>唱歌</text>
    </view>
    <view class="grid-item">
        <image src="/images/house.png" />
        <text>住宿</text>
    </view>
    <view class="grid-item">
        <image src="/images/study.png" />
        <text>学习</text>
    </view>
    <view class="grid-item">
        <image src="/images/work.png" />
        <text>工作</text>
    </view>
    <view class="grid-item">
        <image src="/images/marry.png" />
        <text>结婚</text>
    </view>
</view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

• 预览效果（显然不是我们想要的结果）
  

（五）编写页面样式

1、编写轮播图区域页面样式

• 设置swiper容器高度：350rpx，设置图片容器的高度和宽度
  

/* pages/grid/grid.wxss */
.item {
    width: 100%;
    height: 100%; 
}
1
2
3
4
5

• 预览效果
  

2、编写九宫格区域页面样式

• 整体页面样式

.grids {
    display: flex;
    flex-wrap: wrap; /* 自动绕行 */
}
1
2
3
4

• 每个格子页面样式

.grids .grid-item {
    width: 250rpx; /* 750 ÷ 3 = 250 */
    height: 250rpx;
    border-right: 1rpx solid #eee;
    border-bottom: 1rpx solid #eee;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* 清除第3个格子的右边框 */
.grids .grid-item:nth-child(3) {
    border-right: 0;
}
/* 清除第6个格子的右边框 */
.grids .grid-item:nth-child(6) {
    border-right: 0;
}
/* 清除第9个格子的右边框 */
.grids .grid-item:nth-child(9) {
    border-right: 0;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

• 每个格子中的图片和文字的页面样式

/* 每个格子内的图片样式 */
.grids .grid-item image {
    width: 90rpx;
    height: 90rpx;
}
/* 每个格子内的文本样式 */
.grids .grid-item text {
    color: #999;
    font-size: 35rpx;
    margin-top: 20rpx;
}
1
2
3
4
5
6
7
8
9
10
11

（六）查看模拟机效果

• 查看轮播图和九宫格
  
• 真机调试 -二维码真机调试
  
• 扫码
  
• 手机截图