案例-本地生活

1、修改标题

2、增加tabBar，在app.json文件中的window节点之后，新建tabBar节点

"tabBar": {
    "list": [
      {
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "/images/icon/homepage.png",
      "selectedIconPath": "/images/icon/homepage-sel.png"
    },
    {
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "/images/icon/star-empty.png",
      "selectedIconPath": "/images/icon/star-red.png"
    },
    {
      "pagePath": "pages/contact/contact",
      "text": "联系我们",
      "iconPath": "/images/icon/user.png",
      "selectedIconPath": "/images/icon/user-sel.png"
    }
  ]},

3、设置轮播图

home.js

  /**
   * 页面的初始数据
   */
  data: {
    swiperList:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getSwiperList()
  },

//获取轮播图
  getSwiperList(){
    wx.request({
      url: 'https://www.escook.cn/slides',
      method:'GET',
      success:(res) => {
        console.log(res)
        this.setData({
          swiperList:res.data
        })
      }
    })
  },

home.wxml

<!--轮播图区域-->
<swiper indicator-dots circular>
  <swiper-item wx:for="{{swiperList}}" wx:key="id">
    <image src="{{item.image}}"></image>
  </swiper-item>
</swiper>

4、设置九宫格

home.js

  /**
   * 页面的初始数据
   */
  data: {
    swiperList:[],
    getGridList:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getSwiperList(),
    this.getGridList()
  },
//获取九宫格数据的方法
getGridList(){
  wx.request({
    url: 'https://www.escook.cn/categories',
    method:'GET',
    success:(res) => {
      console.log(res),
      this.setData({
        gridList:res.data
      })
    }
  })
},

九宫格布局美化

<!–pages/home/home.wxml–>

<!--九宫格区域-->
<view class="grid-list">
  <view class="grid-item" wx:for="{{gridList}}" wx:key="id">
    <image src="{{item.icon}}"></image>
    <text>{{item.text}}</text>
  </view>
</view>

<!--九宫格图片区域-->
<view class="img-box">
  <image src="/images/link-01.pn"></image>
  <image src="/images/link-02.pn"></image>
</view>

.grid-list{
  display: flex;/*开启flex布局*/
  flex-wrap: wrap;/*换行*/
  border-left: 1rpx solid #efefee; /*九宫格左侧边框*/
  border-bottom: 1rpx solid #efefee;  /*九宫格顶部边框*/
}
.grid-item{
  width: 33.33%;
  height: 200rpx;
  display: flex;
  flex-direction: column;
  align-items: center;/*横向居中*/
  justify-content: center;/*纵向居中*/
  border-right: 1rpx solid #efefee; /*九宫格右侧边框*/
  border-bottom: 1rpx solid #efefee;  /*九宫格底部边框*/
  box-sizing: border-box;/*更改盒子的方式*/
}
.grid-item image{
  width: 60rpx;
  height: 60rpx;
}
.grid-item text{
  font-size: 24rpx;
  margin-top: 10rpx;/*距文字10rpx*/
}

.img-box{
  display: flex;
  padding: 20rpx 10rpx;/*上下间距20rpx, 左右10rpx */
  justify-content: space-around;/*左右对齐*/
}
.img-box image{
  width: 45%;/*图片大小*/
}