一、運(yùn)行效果

• 輪播圖區(qū)域與九宮格區(qū)域
  

二、知識(shí)儲(chǔ)備

（一）swiper與swiper-item組件

1、swiper組件

（1）功能描述

• 滑塊視圖容器。其中只可放置swiper-item組件，否則會(huì)導(dǎo)致未定義的行為。

（2）屬性說(shuō)明

2、swiper-item組件

（1）功能描述

• 僅可放置在swiper組件中，寬高自動(dòng)設(shè)置為100%。

（2）屬性說(shuō)明

3、基本語(yǔ)法

• swiper組件通過(guò)<swiper>標(biāo)簽定義，swiper-item組件通過(guò)<swiper-item>標(biāo)簽定義。

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

• swiper組件為外層容器，內(nèi)層有3個(gè)swiper-item組件，表示當(dāng)前滑塊視圖內(nèi)容一共有3項(xiàng)?；瑝K視圖內(nèi)容在初始狀態(tài)下只顯示第1項(xiàng)，向左滑動(dòng)顯示第2項(xiàng)，再向右滑動(dòng)可以返回第1項(xiàng)。

4、案例演示

• 頁(yè)面結(jié)構(gòu)示例代碼

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

• 頁(yè)面樣式示例代碼

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

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

• 預(yù)覽效果
  

（二）text組件

• 在HTML中，一般通過(guò)<span>標(biāo)簽定義行內(nèi)文本，而在微信小程序中，則可以通過(guò)text組件定義行內(nèi)文本。需要注意的是，text組件內(nèi)部只能嵌套text組件。

1、常用屬性

2、案例演示

• 使用user-select屬性實(shí)現(xiàn)長(zhǎng)按選中文本的效果

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

• 手指長(zhǎng)按前
  
• 手指長(zhǎng)按后
  
• 使用鼠標(biāo)模擬手指長(zhǎng)按文本之后的選中效果，此處通過(guò)長(zhǎng)按選中了“程序”文本。如果在微信客戶端運(yùn)行的小程序中長(zhǎng)按文本，會(huì)出現(xiàn)“復(fù)制”選項(xiàng)，可以實(shí)現(xiàn)長(zhǎng)按復(fù)制文本的效果。

（三）Flex布局

• 目標(biāo)：掌握Flex布局的使用方法，能夠使用Flex布局的相關(guān)屬性完成頁(yè)面布局

1、什么是Flex布局

• 在微信小程序中可以使用Flex布局實(shí)現(xiàn)自適應(yīng)頁(yè)面。Flex布局又稱為彈性盒（Flexible Box）布局，它為盒子模型提供了很強(qiáng)的靈活性，任何一個(gè)容器都可以指定為Flex布局。

2、基本概念

（1）Flex容器

• 采用Flex布局的元素，稱為Flex容器（簡(jiǎn)稱容器）。

（2）Flex項(xiàng)目

• Flex容器的所有子元素自動(dòng)成為容器成員，稱為Flex項(xiàng)目（簡(jiǎn)稱項(xiàng)目）。

（3）軸

• Flex容器內(nèi)有兩根軸：主軸（Main Axis）和交叉軸（Cross Axis），默認(rèn)情況下主軸為水平方向，交叉軸為垂直方向，項(xiàng)目默認(rèn)沿主軸排列。
• 若想使用Flex布局，首先要設(shè)置父元素的display屬性為flex，表示將父元素設(shè)置為容器，然后就可以使用容器和項(xiàng)目的相關(guān)屬性了。

3、容器常用屬性

4、項(xiàng)目常用屬性

5、flex-direction屬性

• flex-direction屬性用于設(shè)置主軸方向，通過(guò)設(shè)置主軸方向可以規(guī)定項(xiàng)目的排列方向，它有以下4個(gè)常用的可選值。

• 頁(yè)面結(jié)構(gòu)示例代碼

<view class="demo">
    <view>中國(guó)</view>
    <view>四川</view>
    <view>瀘州</view>
</view>

• 頁(yè)面樣式示例代碼

.demo {
    display: flex;
    flex-direction: column-reverse;
}

• 預(yù)覽效果
  

6、 justify-content屬性

• justify-content屬性用于設(shè)置項(xiàng)目在主軸方向上的對(duì)齊方式，能夠分配項(xiàng)目之間及其周圍多余的空間，它有以下5個(gè)常用的可選值。

• 頁(yè)面結(jié)構(gòu)示例代碼

<view class="demo">
    <view>中國(guó)</view>
    <view>四川</view>
    <view>瀘州</view>
</view>

• 頁(yè)面樣式示例代碼

.demo {
    background-color: silver;
    display: flex;   
    justify-content: space-between;
}

• 預(yù)覽效果
  

7、align-items屬性

• align-items屬性用于設(shè)置項(xiàng)目在交叉軸上的對(duì)齊方式，它有以下6個(gè)常用的可選值。

• 頁(yè)面結(jié)構(gòu)示例代碼

<view class="demo">
    <view>中國(guó)</view> 
    <view>四川</view>
    <view>瀘州</view>
</view>

• 頁(yè)面樣式示例代碼

.demo {
    background-color: silver;
    display: flex;   
    justify-content: space-between;    
    height: 100px;
    align-items: center;
}

• 預(yù)覽效果
  

三、實(shí)現(xiàn)步驟

（一）創(chuàng)建項(xiàng)目

• 項(xiàng)目名稱：本地生活

• 模板選擇：不使用模板
  

• 單擊【確定】按鈕
  文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-771063.html

（二）創(chuàng)建頁(yè)面

• 在app.json里配置pages/grid/grid頁(yè)面，手動(dòng)刪除index目錄，設(shè)置導(dǎo)航欄
  

（三）準(zhǔn)備圖片素材

• 在項(xiàng)目根目錄創(chuàng)建images目錄，拷貝項(xiàng)目所需圖片素材
  

（四）編寫(xiě)頁(yè)面結(jié)構(gòu)

1、編寫(xiě)輪播區(qū)域頁(yè)面結(jié)構(gòu)

• 輪播圖有指示點(diǎn)面板，自動(dòng)輪播，時(shí)間間隔3000毫秒
  

<!--pages/grid/grid.wxml-->
<!--輪播圖區(qū)域-->
<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>

• 預(yù)覽效果（看不見(jiàn)圖片，可以看見(jiàn)指示點(diǎn)在循環(huán)）
  

2、編寫(xiě)九宮格區(qū)域頁(yè)面結(jié)構(gòu)

• view組件里嵌套9個(gè)view組件
  

<!--九宮格區(qū)域-->
<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>學(xué)習(xí)</text>
    </view>
    <view class="grid-item">
        <image src="/images/work.png" />
        <text>工作</text>
    </view>
    <view class="grid-item">
        <image src="/images/marry.png" />
        <text>結(jié)婚</text>
    </view>
</view>

• 預(yù)覽效果（顯然不是我們想要的結(jié)果）
  

（五）編寫(xiě)頁(yè)面樣式

1、編寫(xiě)輪播圖區(qū)域頁(yè)面樣式

• 設(shè)置swiper容器高度：350rpx，設(shè)置圖片容器的高度和寬度
  

/* pages/grid/grid.wxss */
.item {
    width: 100%;
    height: 100%; 
}

• 預(yù)覽效果
  

2、編寫(xiě)九宮格區(qū)域頁(yè)面樣式

• 整體頁(yè)面樣式

.grids {
    display: flex;
    flex-wrap: wrap; /* 自動(dòng)繞行 */
}

• 每個(gè)格子頁(yè)面樣式

.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個(gè)格子的右邊框 */
.grids .grid-item:nth-child(3) {
    border-right: 0;
}
/* 清除第6個(gè)格子的右邊框 */
.grids .grid-item:nth-child(6) {
    border-right: 0;
}
/* 清除第9個(gè)格子的右邊框 */
.grids .grid-item:nth-child(9) {
    border-right: 0;
}

• 每個(gè)格子中的圖片和文字的頁(yè)面樣式

/* 每個(gè)格子內(nèi)的圖片樣式 */
.grids .grid-item image {
    width: 90rpx;
    height: 90rpx;
}
/* 每個(gè)格子內(nèi)的文本樣式 */
.grids .grid-item text {
    color: #999;
    font-size: 35rpx;
    margin-top: 20rpx;
}

（六）查看模擬機(jī)效果

• 查看輪播圖和九宮格
  
• 真機(jī)調(diào)試 - 二維碼真機(jī)調(diào)試
  
• 掃碼
  
• 手機(jī)截屏
  

到了這里，關(guān)于微信小程序案例2-2：本地生活的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！