3、Mpvue配置底部Tab栏切换、页面引入图片、请求数据

一、配置底部Tab栏切换

• tabbar

"tabBar": {
    "color": "#999",
    "backgroundColor": "#fafafa",
    "selectedColor": "#333",
    "borderStyle": "white",
    "list": [{
      "text": "首页",
      "pagePath": "pages/index/main",
      "iconPath": "static/tabs/home.png",
      "selectedIconPath": "static/tabs/home-active.png"
    }, {
      "text": "订单",
      "pagePath": "pages/logs/main",
      "iconPath": "static/tabs/orders.png",
      "selectedIconPath": "static/tabs/orders-active.png"
    }, {
      "text": "我的",
      "pagePath": "pages/user/main",
      "iconPath": "static/tabs/user1.png",
      "selectedIconPath": "static/tabs/user2.png"
    }],

• 页面效果

  
  
  底部切换

二、页面引入图片

• 引入图片

// 跟vue引入图片一样
 

• 页面效果

  
  
  引入图片

三、请求数据

• 请求方法

requestData() {
      var that = this;
      var api =
        "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
      wx.request({
        url: api,
        header: {
          "content-type": "application/json" // 默认值
        },
        success(res) {
          console.log(res.data);
          that.list = res.data.result
        }
      });
    }

• 页面效果

  
  
  页面渲染
  
  

  好了，今天的分享就到这里了！
  愿你三冬暖，愿你春不寒；愿你天黑有灯，下雨有伞。