微信小程序的tabBar使用_小程序 tabbar blur

首先tabBar可以实现如图的功能

代码如下

{
  "pages":[
    "pages/index/index",
    "pages/search/search",
    "pages/img/img",
    "pages/user/user",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black",
    "enablePullDownRefresh":true
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "icon/home.png",
      "selectedIconPath": "icon/HOMEMESSAGE.png"
    },{
      "pagePath": "pages/search/search",
      "text": "搜索",
      "iconPath": "icon/search.png",
      "selectedIconPath": "icon/fangdajing.png"
    },{
      "pagePath": "pages/img/img",
      "text": "图片",
      "iconPath": "icon/img.png",
      "selectedIconPath": "icon/user1.png"
    },{
      "pagePath":  "pages/user/user",
      "text": "用户",
      "iconPath": "icon/user.png",
      "selectedIconPath": "icon/ren.png"
    }]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

图标是阿里的