微信小程序可隐藏底部导航吗?应该怎样设置?
你用过微信小程序吗?你有没有玩过前一阶段比较火的微信跳一跳?那就是微信小程序里的游戏,你知道微信小程序的底部导航吗?最近很多微信用户问我微信小程序可隐藏底部导航吗?下面小编就带你了解一下微信小程序可隐藏底部导航吗?
为了让小程序页面更加简洁美观,有时候开发者会进行一个隐藏导航条的设置,但是微信小程序隐藏导航条要怎么设置呢?小编为大家找到了教程,其中包含两种设置的方法,一起来看看吧:
微信小程序中不能直接操作window对象,document文档,跟html的树结构不相同。
实现类似小程序导航的隐藏显示。
小程序
点击网络显示或隐藏网络中包含的内容。其他类似。
如果是jquery很方便实现,能直接操作document。在微信小程序中实现思路是:在微信小程序逻辑层定义变量,通过setData赋值。
方法一:通过变量直接赋值,给每一个要控制显示的view定义变量
.wxml 代码:
视图容器viewmovable基础内容icontextprogress表单组件buttoncheckboxforminputlabelpickertextarea
.js对应代码:
data: { view1: true, view2: true, view3: true }, opentype: function (e) { var url = e.currentTarget.dataset.type url = url + '/' + url wx.navigateTo({ url: url }) }, tigger: function (e) { var num = e.currentTarget.dataset.num if (num == 1) { this.setData({ view1: !this.data.view1 }) } else if (num == 2) { this.setData({ view2: !this.data.view2 }) } else if (num == 3) { this.setData({ view3: !this.data.view3 }) }}
通过data-num="1" 这中传值方式,设置对应的view1的值。
这种方法能够实现效果,但是在添加了新的view之后需要修改js代码,所以不是最优的方法。
方法二:
.wxml 代码:
网络request上传、下载uploadFiledownloadFileWebSocketconnectSocketOnSocketOpen媒体图片录音
.js对应代码:
?// index.jsvar statusArrs = [false]Page({ /** * 页面的初始数据 */ data: { showArr: statusArrs }, opentype: function (e) { var url = e.currentTarget.dataset.url url = '../' + url wx.navigateTo({ url: url }) }, //显示隐藏 tigger: function (e) { var that = this; var num = e.currentTarget.dataset.num statusArrs[num] = !statusArrs[num] that.setData({ showArr: statusArrs }) }})
方法二这种方式就简单实现了不修改js代码,添加了新的view也能控制隐藏显示。
以上就是小编为大家找到的微信小程序隐藏导航条的两种方法,根据自己的需要来选择吧,毕竟这两个方法都还是挺简单的,只要小程序代码不出错就行了。
你知道什么是微信小程序了吗?你用过微信小程序吗?你觉得微信小程序可隐藏底部导航吗?通过小编以上的内容,相信你应该知道微信小程序可隐藏底部导航了吧?