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


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 相关文章推荐
JavaScript TO HTML 转换
Jun 26 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
Nov 14 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
Apr 26 Javascript
javascript编写贪吃蛇游戏
Jul 07 Javascript
JavaScript数组去重的五种方法
Nov 05 Javascript
ASP.NET jquery ajax传递参数的实例
Nov 02 Javascript
Node.js获取前端ajax提交的request信息
Feb 20 Javascript
VueJs使用Amaze ui调整列表和内容页面
Nov 30 Javascript
浅谈vue后台管理系统权限控制思考与实践
Dec 19 Javascript
layui form表单提交之后重新加载数据表格的方法
Sep 11 Javascript
微信小程序 wxParse插件显示视频问题
Sep 27 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
Apr 27 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
浅析PHP中Collection 类的设计
2013/06/21 PHP
PHP实现小程序批量通知推送
2018/11/27 PHP
jquery 实现表单验证功能代码(简洁)
2012/07/03 Javascript
Javascript无阻塞加载具体方式
2013/06/28 Javascript
屏蔽IE弹出&quot;您查看的网页正在试图关闭窗口,是否关闭此窗口&quot;的方法
2013/12/31 Javascript
js实现select跳转功能代码
2014/10/22 Javascript
node.js中的fs.fstat方法使用说明
2014/12/15 Javascript
jQuery中parentsUntil()方法用法实例
2015/01/07 Javascript
jquery滚动到顶部底部代码
2015/04/20 Javascript
jQuery基于BootStrap样式实现无限极地区联动
2016/08/26 Javascript
JS 实现 ajax 异步浏览器兼容问题
2017/01/21 Javascript
微信小程序商城项目之侧栏分类效果(1)
2017/04/17 Javascript
AngularJS获取json数据的方法详解
2017/05/27 Javascript
通过命令行创建vue项目的方法
2017/07/20 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
jQuery实现移动端图片上传预览组件的方法分析
2020/05/01 jQuery
[00:57]深扒TI7聊天轮盘语音出处5
2017/05/11 DOTA
python实现指定字符串补全空格的方法
2015/04/30 Python
Python实现信用卡系统(支持购物、转账、存取钱)
2016/06/24 Python
获取python的list中含有重复值的index方法
2018/06/27 Python
Python常见数字运算操作实例小结
2019/03/22 Python
用Python实现将一张图片分成9宫格的示例
2019/07/05 Python
python3.6+django2.0+mysql搭建网站过程详解
2019/07/24 Python
PyQt5实现简单的计算器
2020/05/30 Python
python中time、datetime模块的使用
2020/12/14 Python
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的
2015/07/24 面试题
写好求职应聘自荐信的三部曲
2013/09/21 职场文书
ktv周年庆活动方案
2014/08/18 职场文书
2015年办公室工作总结范文
2015/03/31 职场文书
大学生团日活动总结
2015/05/06 职场文书
反腐倡廉主题教育活动总结
2015/05/07 职场文书
讲座新闻稿
2015/07/18 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书
浅谈Python响应式类库RxPy
2021/06/14 Python
Redis主从配置和底层实现原理解析(实战记录)
2021/06/30 Redis