zoukankan      html  css  js  c++  java
  • (八)微信小程序:tabBar应用

    全局配置里的tabBar

      1.查看API中的全局配置,了解tabBar的结构

          

           根据API设置属性:

         

           设置tabBar中的字体+背景:

              

        2.主要在app.json中进行全局配置即可

    {
      "pages": [   
        "pages/index/index",
        "pages/logs/logs",
        "pages/news/news",
        "pages/news/news-details/news-details",
        "pages/movie/movie"
      ],
      "window":{
        "navigationBarBackgroundColor":"#109D59",
        "navigationBarTextStyle": "white"
      },
      "tabBar":{
          "color":"#000",
          "selectedColor":"#109D59",
          "backgroundColor":"#fff",
          "borderStyle":"black",
          "position":"bottom",
        "list":[
          {
            "pagePath": "pages/news/news",
            "text": "新闻",
            "iconPath":"./image/n_t2.png",
            "selectedIconPath":"./image/s_t2.png"
          },{
            "pagePath": "pages/movie/movie",
            "text": "电影",
            "iconPath":"./image/n_d1.png",
            "selectedIconPath":"./image/s_d1.png"
          }
        ]
      }
    }
    View Code

            注意:唯一需要更改的是在index页面跳转到news页面时的wx.navigateTo()   更改为wx.switchTab()

                  

        3.加上tabBar页面效果

              

       本节实现了tabBar导航栏的功能,那么我们发现电影页面还是空荡荡的~,所以下一节进行电影界面UI设计  开森不开森~

  • 相关阅读:
    Windows程序调试系列: 使用VC++生成调试信息 转
    mysql基础
    mysql bug
    VS2010下配置Winpcap 开发环境
    WIN7 下面 装XP
    Iptables 指南 1.1.19
    mysql内核 innodb存储引警(卷1)配书 用VS 2003 编绎 mysql-3.23.49 源代码
    cmake
    Windows+VS2012环境下编译调试MySQL源码 转
    哈佛图书馆自习室墙上的训言 (自勉)
  • 原文地址:https://www.cnblogs.com/happy-prince/p/12772647.html
Copyright © 2011-2022 走看看