微信小程序开发,导航栏右边的按钮怎么设置

微信小程序开发,导航栏右边的按钮怎么设置,第1张

设置导航栏

导航栏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版本,根据自己的电脑情况,下载适合自己的版本。 把微信小程序开发工具下载回


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/11480030.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-16
下一篇 2023-05-16

发表评论

登录后才能评论

评论列表(0条)

保存