You are here

Drupal8+微信小程序:13, 使用tabBar实现底部tab导航

作者: 老葛 亚艾元软件

我后来,试用了以前其它小程序,大部分小程序,底部都有一个好用的tab导航。特别是参考了微信小程序数据助手的导航设计。对比一下,原来的首页几个图标的设计,已经太丑了,而且当时那几个图标,也都是用的同一个,非常不美观。

新的改版,其中的重要的改进就是增加底部的tab导航,还有顶部的tab导航。这是改进后的样子:

8-2-13-1.png 

8-2-13-1

 

   实现底部的导航,我们需要修改小程序的app.json文件:

{

  "pages":[

    "pages/qipus/qipus",

    "pages/index/index",

"pages/search/search",

"pages/qipus/qipuitem",

    "pages/players/players",

"pages/players/playeritem",

"pages/opening/opening",

"pages/opening/openinglist",

"pages/events/events",

"pages/events/eventlist",

"pages/my/my",

"pages/my/aboutus",

"pages/my/myshares",

"pages/my/myfavorites",

"pages/my/myreads",

    "pages/my/mysettings",

"pages/news/news",

"pages/news/newsitem"

  ],

  "window":{

    "backgroundTextStyle":"light",

    "navigationBarBackgroundColor": "#fff",

    "navigationBarTitleText": "亚艾元象棋",

    "navigationBarTextStyle":"black"

  },

  "tabBar": {

    "color": "#6e6d6b",

    "selectedColor": "#0C8EE9",

    "borderStyle": "white",

    "backgroundColor": "#fff",

    "box-shadow":"0 0 6px 0",  

"font-size":"20px",

    "list": [{

      "pagePath": "pages/qipus/qipus",

      "iconPath": "images/nav/chip-off.png",

      "selectedIconPath": "images/nav/chip-on.png",   

      "text": "棋谱"

    }, {

      "pagePath": "pages/news/news",

      "iconPath": "images/nav/dynamic-off.png",

      "selectedIconPath": "images/nav/dynamic-on.png",   

      "text": "动态"

    },{

      "pagePath": "pages/search/search",

      "iconPath": "images/nav/search-off.png",

      "selectedIconPath": "images/nav/search-on.png",   

      "text": "搜索"

    }, {

      "pagePath": "pages/my/my",

      "iconPath": "images/nav/my-off.png",

      "selectedIconPath": "images/nav/my-on.png",   

      "text": "我的"

    }]

  },

  "networkTimeout": {

    "request": 10000,

    "downloadFile": 10000

  }

}

  这里使用tabBar参数,设置底部导航,是小程序推荐的方式。在这个参数下面,有这么一些参数可供使用:

    "color": "#6e6d6b",

    "selectedColor": "#0C8EE9",

    "borderStyle": "white",

    "backgroundColor": "#fff",

    "box-shadow":"0 0 6px 0",  

"font-size":"20px",

   用来控制底部导航的样式,比如颜色、选中颜色、背景颜色、字体大小、边框样式、阴影效果.

   里面的list包含一个数组。里面包含每个tab的设置。对于每个tab,我们可以设置下面几个选项:

      "pagePath": "pages/qipus/qipus",

      "iconPath": "images/nav/chip-off.png",

      "selectedIconPath": "images/nav/chip-on.png",   

      "text": "棋谱"

 

   pagePath:小程序页面路径

   Texttab标签文本

   iconPath:图标路径

   selectedIconPath:选中图标路径。

为了让我们的图标更漂亮,我们还制作了一组图标:

8-2-13-2.png 

8-2-13-2

 

   图标分两种,一种是未选中的样子,一种是选中后的样子,通常选中后的要突出显示。

   个人页面的之后,我们后面再介绍,先把这个tab实现了。


Drupal版本: