微信小程序自定义导航隐藏和显示功能

微信小程序中不能直接操作window对象，document文档，跟html的树结构不相同。

实现类似导航的隐藏显示，如图效果：

点击网络显示或隐藏网络中包含的内容。其他类似。

如果是jquery很方便实现，能直接操作document。在微信小程序中实现思路是：在逻辑层定义变量，通过setData赋值。

方法一：通过变量直接赋值，给每一个要控制显示的view定义变量

.wxml 代码：

<!--index.wxml-->
<view class="navView" bindtap="tigger" data-num="1">视图容器</view>
<view class="classname" hidden="{{view1}}">
 <button bindtap="opentype" data-type="view">view</button>
 <button bindtap="opentype" data-type="movable">movable</button>
</view>
<view class="navView" bindtap="tigger" data-num="2">基础内容</view>
<view class="classname" hidden="{{view2}}">
<button bindtap="opentype" data-type="icon">icon</button>
<button bindtap="opentype" data-type="text">text</button>
<button bindtap="opentype" data-type="progress">progress</button>
</view>
<view class="navView" bindtap="tigger" data-num="3">表单组件</view>
<view class="classname" hidden="{{view3}}">
<button bindtap="opentype" data-type="button">button</button>
<button bindtap="opentype" data-type="checkbox">checkbox</button>
<button bindtap="opentype" data-type="form">form</button>
<button bindtap="opentype" data-type="input">input</button>
<button bindtap="opentype" data-type="label">label</button>
<button bindtap="opentype" data-type="picker">picker</button>
<button bindtap="opentype" data-type="textarea">textarea</button>
</view>

.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 代码：

<!--index.wxml-->
<view class="navView" bindtap="tigger" data-num="0">网络</view>
<view class="classname" hidden="{{showArr[0]}}">
 <button bindtap="opentype" data-url="network/request/request">request</button>
</view>
<view class="navView" bindtap="tigger" data-num="1">上传、下载</view>
<view class="classname" hidden="{{showArr[1]}}">
 <button bindtap="opentype" data-url="uploadFile">uploadFile</button>
 <button bindtap="opentype" data-url="downloadFile">downloadFile</button>
</view>
<view class="navView" bindtap="tigger" data-num="2">WebSocket</view>
<view class="classname" hidden="{{showArr[2]}}">
 <button bindtap="opentype" data-url="connectSocket">connectSocket</button>
 <button bindtap="opentype" data-url="downloadFile">OnSocketOpen</button>
</view>
<view class="navView" bindtap="tigger" data-num="3">媒体</view>
<view class="classname" hidden="{{showArr[3]}}">
 <button bindtap="opentype" data-url="uploadFile">图片</button>
 <button bindtap="opentype" data-url="downloadFile">录音</button>
</view>

.js对应代码：

// index.js
var 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也能控制隐藏显示。

以上所述是小编给大家介绍的微信小程序自定义导航隐藏和显示功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# 微信小程序自定义导航  # 微信小程序隐藏导航  # 微信小程序控制view隐藏显示的5种方法汇总  # uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果  # 微信小程序之滑动页面隐藏和显示组件功能的实现代码  # 微信小程序实现动态显示和隐藏某个控件功能示例  # 微信小程序之多列表的显示和隐藏功能【附源码】  # 微信小程序实践之动态控制组件的显示/隐藏功能  # 微信小程序 实现动态显示和隐藏某个控件  # 微信小程序中视频的显示与隐藏功能  # 小编  # 在此  # 也能  # 给大家  # 自定义  # 如图  # 表单  # 很方便  # 所述  # 最优  # 给我留言  # 感谢大家  # 疑问请  # 有任何  # 实现了  # 中传  # 上传  # 文档  # 但是在  # 这种方法 

相关文章： 如何通过老薛主机一键快速建站？  网站制作与设计教程,如何制作一个企业网站，建设网站的基本步骤有哪些？  如何通过山东自助建站平台快速注册域名？  网站制作难吗安全吗,做一个网站需要多久时间？  大同网页,大同瑞慈医院官网？  最好的网站制作公司,网购哪个网站口碑最好，推荐几个？谢谢？  如何快速搭建高效服务器建站系统？  建站之星logo尺寸如何设置最合适？  网站制作模板下载什么软件,ppt模板免费下载网站？  网页制作模板网站推荐,网页设计海报之类的素材哪里好？  怎么制作网站设计模板图片,有电商商品详情页面的免费模板素材网站推荐吗？  logo在线制作免费网站在线制作好吗,DW网页制作时，如何在网页标题前加上logo？  如何确保西部建站助手FTP传输的安全性？  如何高效配置IIS服务器搭建网站？  无锡营销型网站制作公司,无锡网选车牌流程？  网站制作企业,网站的banner和导航栏是指什么？  建站之星收费标准详解：套餐费用及年费价格表一览  做企业网站制作流程,企业网站制作基本流程有哪些？  江苏网站制作公司有哪些,江苏书法考级官方网站？  建站主机选购指南：核心配置与性价比推荐解析  上海网站制作网页,上海本地的生活网站有哪些？最好包括生活的各个方面的？  如何选择长沙网站建站模板？H5响应式与品牌定制哪个更优？  如何用腾讯建站主机快速创建免费网站？  如何通过虚拟主机快速完成网站搭建？  ,网页ppt怎么弄成自己的ppt？  seo网站制作优化,网站SEO优化步骤有哪些？  合肥做个网站多少钱,合肥本地有没有比较靠谱的交友平台？  黑客入侵网站服务器的常见手法有哪些？  免费网站制作appp,免费制作app哪个平台好？  建站之星如何实现PC+手机+微信网站五合一建站？  学校为何禁止电信移动建设网站？  婚礼视频制作网站,学习*后期制作的网站有哪些？  网站制作的方法有哪些,如何将自己制作的网站发布到网上？  如何在阿里云服务器自主搭建网站？  网站制作大概多少钱一个,做一个平台网站大概多少钱？  购物网站制作公司有哪些,哪个购物网站比较好？  如何在阿里云完成域名注册与建站？  官网自助建站平台指南：在线制作、快速建站与模板选择全解析  如何续费美橙建站之星域名及服务？  网站设计制作企业有哪些,抖音官网主页怎么设置？  深圳企业网站制作设计,在深圳如何网上全流程注册公司？  如何在景安服务器上快速搭建个人网站？  深圳网站制作培训,深圳哪些招聘网站比较好？  广州网站建站公司选择指南：建站流程与SEO优化关键词解析  高防服务器租用指南：配置选择与快速部署攻略  专业公司网站制作公司,用什么语言做企业网站比较好？  建站主机如何选？高性价比方案全解析  C++ static_cast和dynamic_cast区别_C++静态转换与动态类型安全转换  盐城做公司网站,江苏电子版退休证办理流程？  建站之星后台密码遗忘如何找回？