微信小程序添加底部导航栏+实现点击跳转代码书写

类比大麦网的底部导航栏作为案例来书写流程:

建立如下文件夹:(标红为底部导航栏的导航文件夹,某些需要新建)

微信小程序添加底部导航栏+实现点击跳转代码书写_第1张图片

在app.json中添加如下代码:

微信小程序添加底部导航栏+实现点击跳转代码书写_第2张图片

微信小程序添加底部导航栏+实现点击跳转代码书写_第3张图片 

 整体代码为:

{
    "pages": [
        "pages/index/index",
        "pages/scene/scene",
        "pages/member/member",
        "pages/wallet/wallet",
        "pages/mine/mine"
    ],
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "有洁癖的懒羊羊",
        "navigationBarTextStyle": "black"
    },
    "style": "v2",
    "sitemapLocation": "sitemap.json",
    "tabBar": {
      "list": [{
        "pagePath": "pages/index/index",
        "text": "精选",
        "iconPath": "pages/images/index.png",
        "selectedIconPath": "pages/images/index-active.png"
      },
      {
        "pagePath": "pages/scene/scene",
        "text": "现场",
        "iconPath": "pages/images/scene.png",
        "selectedIconPath": "pages/images/scene-active.png"
      },
      {
        "pagePath": "pages/member/member",
        "text": "会员",
        "iconPath": "pages/images/member.png",
        "selectedIconPath": "pages/images/member-active.png"
      },
      {
        "pagePath": "pages/wallet/wallet",
        "text": "票夹",
        "iconPath": "pages/images/wallet.png",
        "selectedIconPath": "pages/images/wallet-active.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "pages/images/mine.png",
        "selectedIconPath": "pages/images/mine-active.png"
      }
    ]
    }
}

在images文件夹中分别添加被选中和未被选中的图片:

微信小程序添加底部导航栏+实现点击跳转代码书写_第4张图片

 在index.wxml中添加点击跳转代码:


  精选
  点击跳转
  

 在index.js中添加点击跳转代码:

// index.js
Page({
  jumpPage:function() {
    wx.switchTab({
      url: '/pages/member/member'
    })
  }
})

最终结果界面:

微信小程序添加底部导航栏+实现点击跳转代码书写_第5张图片

 

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