Configure tabbar and request network data requests

  One 、 To configure tabBar

design sketch ：

  Code ：app.json

"tabBar": {
    "selectedColor": "green",
    "position": "bottom",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": " home page ",
        "iconPath": "/images/ home page .png",
        "selectedIconPath": "/images/ home page  (1).png"
      },
      {
        "pagePath": "pages/message/message",
        "text": " Information ",
        "iconPath": "/images/ news .png",
        "selectedIconPath": "/images/ news  (1).png"
      },
      {
        "pagePath": "pages/contact/contact",
        "text": " Contact us ",
        "iconPath": "/images/ Contact us .png",
        "selectedIconPath": "/images/ Contact us  (1).png"
      }
    ]
  },

Two 、 Network data request

skip request Legal domain name verification  

  Code ：

home.wxml

<swiper indicator-dots='true' circular="true">
  <swiper-item wx:for="{
   {swiperList}}" wx:key="id">
    <image src="{
   {item.image}}"></image>
  </swiper-item>
</swiper>

home.wxss 

swiper {
  height: 350rpx;
}

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

home.js

Page({

  /**
   *  Initial data of the page 
   */
  data: {
    swiperList: [],

  },

  /**
   *  Life cycle function -- Monitor page loading 
   */
  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
        })

      }

    })
  },

design sketch ：