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


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 相关文章推荐
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
Jan 11 Javascript
js控制多图左右滚动切换效果代码分享
Aug 26 Javascript
jquery可定制的在线UEditor编辑器
Nov 17 Javascript
手机软键盘弹出时影响布局的解决方法
Dec 15 Javascript
AngularJS实现自定义指令及指令配置项的方法
Nov 20 Javascript
详解mpvue开发小程序小总结
Jul 25 Javascript
详解webpack打包第三方类库的正确姿势
Oct 20 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
Jan 25 Javascript
JS中的防抖与节流及作用详解
Apr 01 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
Apr 22 Javascript
原生js实现贪食蛇小游戏的思路详解
Nov 26 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
深究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程序效率优化的一些策略小结
2010/07/17 PHP
深入分析php中接口与抽象类的区别
2013/06/08 PHP
PHP接收json 并将接收数据插入数据库的实现代码
2015/12/01 PHP
没有document.getElementByName方法
2013/08/19 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
nodejs npm install全局安装和本地安装的区别
2014/06/05 NodeJs
JavaScript数组常用操作技巧汇总
2014/11/17 Javascript
javascript中eval函数用法分析
2015/04/25 Javascript
jquery性能优化高级技巧
2015/08/24 Javascript
js如何判断输入字符串长度
2015/12/16 Javascript
JS创建事件的三种方法(实例代码)
2016/05/12 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
JS DOMReady事件的六种实现方法总结
2016/11/23 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
2016/11/25 Javascript
JavaScript数据结构之数组的表示方法示例
2017/04/12 Javascript
angular2 NgModel模块的具体使用方法
2019/04/10 Javascript
python3生成随机数实例
2014/10/20 Python
python插入数据到列表的方法
2015/04/30 Python
Python面向对象之继承和组合用法实例分析
2018/08/27 Python
在numpy矩阵中令小于0的元素改为0的实例
2019/01/26 Python
Python面向对象思想与应用入门教程【类与对象】
2019/04/12 Python
浅谈pycharm使用及设置方法
2019/09/09 Python
Django自定义列表 models字段显示方式
2020/04/03 Python
解决Jupyter Notebook使用parser.parse_args出现错误问题
2020/04/20 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
使用placeholder属性设置input文本框的提示信息
2020/02/19 HTML / CSS
Grow Gorgeous美国官网:只要八天,体验唤醒毛囊后新生的茂密秀发
2018/06/04 全球购物
世界上最大的艺术社区:SAA
2020/12/30 全球购物
天逸系统(武汉)有限公司Java笔试题
2015/12/29 面试题
What is EJB
2016/07/22 面试题
网上卖盒饭创业计划书
2014/01/26 职场文书
市场专员岗位职责
2014/02/14 职场文书
2014年党建工作汇报材料
2014/11/02 职场文书
2015年社区国庆节活动总结
2015/07/30 职场文书
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL
SONY AN-LP1 短波有源天线放大器图
2022/04/05 无线电