微信小程序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"

      }

    ]

  }

}

你可能感兴趣的:(微信小程序tabBar的demo)