微信小程序可隐藏底部导航吗？应该怎样设置？

时间：2023-07-01 14:05 阅读数：110 人阅读分类：网站建设

　　你用过微信小程序吗?你有没有玩过前一阶段比较火的微信跳一跳?那就是微信小程序里的游戏，你知道微信小程序的底部导航吗?最近很多微信用户问我微信小程序可隐藏底部导航吗?下面小编就带你了解一下微信小程序可隐藏底部导航吗?

　　为了让小程序页面更加简洁美观，有时候开发者会进行一个隐藏导航条的设置，但是微信小程序隐藏导航条要怎么设置呢?小编为大家找到了教程，其中包含两种设置的方法，一起来看看吧：

　　微信小程序中不能直接操作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也能控制隐藏显示。

　　以上就是小编为大家找到的微信小程序隐藏导航条的两种方法，根据自己的需要来选择吧，毕竟这两个方法都还是挺简单的，只要小程序代码不出错就行了。

　　你知道什么是微信小程序了吗？你用过微信小程序吗？你觉得微信小程序可隐藏底部导航吗?通过小编以上的内容，相信你应该知道微信小程序可隐藏底部导航了吧?希望小编的内容对你有所帮助，如果需要了解更多信息，请关注微微风。