大飞

关注TA

挑战一切！

加入社区3,250天
写了333,609字

该文章投稿至Nemo社区 Js、Css、Html 板块复制链接

微信小程序——底部导航

发布于 2017/01/25 09:27 1,615浏览 0回复 1,654字

底部导航比较简单的实现，然而类似今天头条的顶部导航目前却比较蛋疼，还没有比较好用的控件，昨晚试了一下使用scrollview实现，发现使用wx:for语句不能是是scrollview横向滚动，bugbugbug，就作罢了，加上微信小程序并没有类似安卓的fragment做导航切换，这就不太适合开发了，多个view在一个页面上，不好控制。

底部导航的实现，只需要在app.json上配置tabBar相关信息，包括配置文字，选中和未选中的图片，以及跳转的路径。

{
  "pages": [
    "pages/test/home/home",
    "pages/index/index",
    "pages/logs/logs",
    "pages/test/request/request",
    "pages/test/voiceanimate/voiceanimate",
    "pages/test/dragImage/dragImage",
    "pages/test/mapView/mapView",
    "pages/test/autoImage/autoImage",
    "pages/test/upDownReflsh/upDownReflsh",
    "pages/test/chooseMedia/chooseMedia",
    "pages/test/pageTab/pageTab"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "networkTimeout": {
    "request": 10000,
    "connectSocket": 10000,
    "uploadFile": 10000,
    "downloadFile": 10000
  },
   "tabBar": {  
    "color": "#ccc",  
    "selectedColor": "#35495e",  
    "borderStyle": "white",  
    "backgroundColor": "#f9f9f9",  
    "list": [  
      {  
        "text": "例子",  
        "pagePath": "pages/test/home/home",  
        "iconPath": "pages/images/icon_API.png",  
        "selectedIconPath": "pages/images/icon_API_HL.png"  
      },  
      {  
        "text": "哈哈",  
        "pagePath": "pages/test/chooseMedia/chooseMedia",  
        "iconPath": "pages/images/icon_component.png",  
        "selectedIconPath": "pages/images/icon_component_HL.png"  
      }
    ]  
  }  ,
  "debug": true
}

点了个评