微信小程序tabBar的demo

废话少说,能看懂就看,看不懂路过,解释了你也未必懂,直接上代码。

效果图:

这个demo需要6张图片:


做好好三个界面并注册,界面的数量要大于1小于6:

app.json代码:

{

  "pages":[

    "pages/index/index",

    "pages/index2/index2",

    "pages/index3/index3"

  ],

  "window":{

    "backgroundTextStyle":"light",

    "navigationBarBackgroundColor": "#fff",

    "navigationBarTitleText": "tabBar",

    "navigationBarTextStyle":"black"

  },

  "tabBar": {

    "position":"bottom",

    "borderStyle":"white",

    "list": [

      {

        "pagePath": "pages/index/index",

        "text": "阅读",

        "iconPath":"/images/ciwei.png",

        "selectedIconPath":"/images/ciwei_hl.png"

      },

      {

        "pagePath": "pages/index2/index2",

        "text": "电影",

        "iconPath": "/images/dianying.png",

        "selectedIconPath": "/images/dianying_hl.png"

      },

      {

        "pagePath": "pages/index3/index3",

        "text": "我的",

        "iconPath": "/images/yuedu.png",

        "selectedIconPath": "/images/yuedu_hl.png"

      }

    ]

  }

}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 项目结构:(分为全局结构和局部结构) 微信自动生成项目 ==>全局结构: 上述结构是微信小程序创建项目时,自动生成...
    崔渣渣阅读 438评论 0 0
  • 我把自己做小程序的过程稍作总结,还有一些实用技巧分享给大家。对初学者应该有用。 文中提到的登录微信公众号后的功能,...
    极乐叔阅读 1,881评论 0 0
  • 项目结构:(分为全局结构和局部结构) ==>全局结构: 上述结构是微信小程序创建项目时,自动生成的项目结构,其中的...
    royluck阅读 636评论 0 0
  • 爆竹声中一岁除, 春风送暖入屠苏。 千门万户曈曈日, 总把新桃换旧符。 中国的传统文化 就像这些优美的诗句 字里行...
    丶足迹阅读 753评论 0 0
  • Cocoa 中常见的设计模式: 创建型 (Creational):单例模式 (Singleton) 结构型 (St...
    S大偉阅读 225评论 0 0