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


Posted in Javascript onJune 13, 2017

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

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

Javascript 相关文章推荐
基于jQuery实现的水平和垂直居中的div窗口
Aug 08 Javascript
jquery设置控件位置的方法
Aug 21 Javascript
javascript数组遍历for与for in区别详解
Dec 04 Javascript
js仿微博实现统计字符和本地存储功能
Dec 22 Javascript
Ajax使用原生态JS验证用户名是否存在
May 26 Javascript
JS仿京东移动端手指拨动切换轮播图效果
Apr 10 Javascript
图解Javascript——作用域、作用域链、闭包
Mar 21 Javascript
vue favicon设置以及动态修改favicon的方法
Dec 21 Javascript
Javascript的this详解
Mar 23 Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
May 08 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
antd的select下拉框因为数据量太大造成卡顿的解决方式
Oct 31 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
Jun 13 #Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
Jun 13 #Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
Jun 13 #Javascript
angularjs之$timeout指令详解
Jun 13 #Javascript
JS实现json的序列化和反序列化功能示例
Jun 13 #Javascript
angularjs实现搜索的关键字在正文中高亮出来
Jun 13 #Javascript
angular-ngSanitize模块-$sanitize服务详解
Jun 13 #Javascript
You might like
汇总PHPmailer群发Gmail的常见问题
2016/02/24 PHP
PHP实现与java 通信的插件使用教程
2019/08/11 PHP
JQuery 学习笔记 element属性控制
2009/07/23 Javascript
jQuery的实现原理的模拟代码 -3 事件处理
2010/08/03 Javascript
jquery 卷帘效果实现代码(不同方向)
2013/02/05 Javascript
深入理解Javascript作用域与变量提升
2013/12/09 Javascript
如何正确使用javascript 来进行我们的程序开发
2014/06/23 Javascript
详解Javascript继承的实现
2016/03/25 Javascript
如何利用Promises编写更优雅的JavaScript代码
2016/05/17 Javascript
AngularJs  Understanding Angular Templates
2016/09/02 Javascript
Angular的$http的ajax的请求操作(推荐)
2017/01/10 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
2017/05/17 jQuery
js断点调试心得分享(必看篇)
2017/12/08 Javascript
JS中利用FileReader实现上传图片前本地预览功能
2018/03/02 Javascript
Angular中sweetalert弹框的基本使用教程
2018/07/22 Javascript
vue表单数据交互提交演示教程
2019/11/13 Javascript
python设置检查点简单实现代码
2014/07/01 Python
Python编写屏幕截图程序方法
2015/02/18 Python
在Pycharm terminal中字体大小设置的方法
2019/01/16 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
django queryset相加和筛选教程
2020/05/18 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
python pyg2plot的原理知识点总结
2021/02/28 Python
小天鹅官方商城:LittleSwan
2017/06/16 全球购物
美国体育用品在线:Modell’s Sporting Goods
2018/06/07 全球购物
英国最大的独立玩具专卖店:The Entertainer
2019/09/06 全球购物
单位创先争优活动方案
2014/01/26 职场文书
服务承诺口号
2014/05/22 职场文书
流动人口婚育证明范本
2014/09/26 职场文书
教师作风建设剖析材料
2014/10/11 职场文书
2014年英语教学工作总结
2014/12/17 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书
浅谈Redis的keys命令到底有多慢
2021/10/05 Redis
Python爬虫入门案例之回车桌面壁纸网美女图片采集
2021/10/16 Python
关于使用Redisson订阅数问题
2022/01/18 Redis
vue+iview实现手机号分段输入框
2022/03/25 Vue.js