设置导航栏
导航栏TabBar
如果我们的小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),那么我们可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。
Tip: 通过页面跳转(wx.navigateTo)或者页面重定向(wx.redirectTo)所到达的页面,即使它是定义在 tabBar 配置中的页面,也不会显示底部的 tab 栏。
tabBar 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。
属性值:
示例:
app.json:
运行:
微信小程序教程系列
相关连接:http://blog.csdn.net/michael_ouyang/article/details/54700871
在一个微信小程序中想要用到两种不同的tabbar样式,需要在app.js中自定义,在页面加载时进行调用。
比如一个小程序需要两个版本(用户版、商家版),并且能通过一个按钮在两个版本间进行切换,可能会用到这种方式。
此处以两个页面(index,logs)显示两种tabbar样式为例,通过切换按钮进行切换。
首先有一个模板文件:tabbar.wxml
在app.json中无需定义“tabBar”
在app.js中自定义如下
在app.wxss中定义显示样式
index.wxml,用到自定义tabbar的页面的首部都需要引入模板文件
index.js
logs.js
加载自定义tabbar的那句话(app.editTabBar)写在onload或onshow中都可以。
只写了两个主页面,其他页面可自行定义跳转。
最后放上效果图:
首先登陆微信公布的简易教程网页,登陆上去后,点击导航栏上方的“工具”按钮。然后点击左侧边的导航栏“下载”按钮。 微信小程序开发工具有windows 64,windows 32和mac版本,根据自己的电脑情况,下载适合自己的版本。 把微信小程序开发工具下载回欢迎分享,转载请注明来源:内存溢出
评论列表(0条)