2.7

今天写了一个实例，下图是完整的效果。

 

<!--pages/home/home.wxml-->
<swiper indicator-dots circular>
    <swiper-item wx:for="{{swiperList}}" wx:key="id">
        <image src="{{item.image}}"></image>
    </swiper-item>
</swiper>
<!-- 九宫格区域 -->
<view class="gridList">
    <view class="gridItem" wx:for="{{gridList}}" wx:key="id">
        <image src="{{item.icon}}"></image>
        <text>{{item.name}}</text>
    </view>
</view>
<!-- 图片区域 -->
<view class="imagebox">
    <image src="/images/link01.png" mode="widthFix"></image>
    <image src="/images/link02.png" mode="widthFix"></image>
</view>

/* pages/home/home.wxss */
swiper {
    height: 350rpx;
}

swiper image {
    width: 100%;
    height: 100%;
}

.gridList {
    display: flex;
    flex-wrap: wrap;
    border-left: 1rpx solid #efefef;
    border-top: 1rpx solid #efefef;
}

.gridItem {
    width: 33.333%;
    height: 200rpx;
    /* 允许元素自由排布 */
    display: flex;
    /* 各元素之间纵向排布 */
    flex-direction: column;
    /* 美食与图片横向居中 */
    align-items: center;
    /* 美食与图片纵向居中 */
    justify-content: center;
    /* 对每个元素加一个右侧和下侧的边框 */
    border-right: 1rpx solid #efefef;
    border-bottom: 1rpx solid #efefef;
    /* 改变盒子方式 */
    box-sizing: border-box;
}

.gridItem image {
    width: 60rpx;
    height: 60rpx;
}

.gridItem text {
    font-size: 24rpx;
    /* 文本与图片之间存在距离 */
    margin-top: 10rpx;
}

.imagebox {
    /* 横向展示 */
    display: flex;
    padding: 10rpx 20rpx;
    justify-content: space-around;
}

.imagebox image {
    width: 45%;
}

{
    "pages": [
        "pages/home/home",
        "pages/message/message",
        "pages/contact/contact"
    ],
    "window": {
        "navigationBarTextStyle": "white",
        "navigationBarTitleText": "本地生活",
        "navigationBarBackgroundColor": "#abccba",
        "enablePullDownRefresh": true
    },
    "tabBar": {
        "list": [{
                "text": "首页",
                "iconPath": "/images/2.png",
                "selectedIconPath": "/images/2.2.png",
                "pagePath": "pages/home/home"
            },
            {
                "text": "消息",
                "iconPath": "/images/3.png",
                "selectedIconPath": "/images/3.2.png",
                "pagePath": "pages/message/message"
            },
            {
                "text": "联系我们",
                "iconPath": "/images/1.png",
                "selectedIconPath": "/images/1.2.png",
                "pagePath": "pages/contact/contact"
            }
        ]
    },
    "style": "v2",
    "componentFramework": "glass-easel",
    "sitemapLocation": "sitemap.json",
    "lazyCodeLoading": "requiredComponents"
}

// pages/home/home.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        //存放轮播图数据的列表
        swiperList: [],
        //存放九宫格数据的
        gridList: [],
    },
    //获取轮播图数据的方法
    getSwiperList() {
        wx.request({
            url: 'https://applet-base-api-t.itheima.net/slides',
            "method": "GET",
            success: (res) => {
                console.log(res)
                this.setData({
                    swiperList: res.data
                })
            }
        })
    },
    //获取九宫格数据的方法
    getGridList() {
        wx.request({
            url: 'https://applet-base-api-t.itheima.net/categories',
            method: "GET",
            success: (res) => {
                console.log(res)
                this.setData({
                    gridList: res.data
                })
            }
        })
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.getSwiperList(),
            this.getGridList()
    },