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


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 相关文章推荐
JS处理VBArray的函数使用说明
May 11 Javascript
javascript面向对象之二 命名空间
Feb 08 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
Dec 10 Javascript
jQuery的css()方法用法实例
Dec 24 Javascript
当jquery ajax遇上401请求的解决方法
May 19 Javascript
dul无法加载bootstrap实现unload table/user恢复
Sep 29 Javascript
JS去除字符串中空格的方法
Feb 14 Javascript
微信小程序 出现47001 data format error原因解决办法
Mar 10 Javascript
vue父组件向子组件传递多个数据的实例
Mar 01 Javascript
async/await地狱该如何避免详解
May 10 Javascript
详解vue组件开发脚手架
Jun 15 Javascript
关于JavaScript轮播图的实现
Nov 20 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 批量删除数据的方法分析
2009/10/30 PHP
PHP CKEditor 上传图片实现代码
2009/11/06 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
php利用ffmpeg提取视频中音频与视频画面的方法详解
2017/06/07 PHP
js获取div高度的代码
2008/08/09 Javascript
js输出列表实现代码
2010/09/12 Javascript
jquery 学习之二 属性(类)
2010/11/25 Javascript
js实现倒计时(距离结束还有)示例代码
2013/07/24 Javascript
JavaScript按位运算符的应用简析
2014/02/04 Javascript
jQuery插件zepto.js简单实现tab切换
2015/06/16 Javascript
浅谈JavaScript变量的自动转换和语句
2016/06/12 Javascript
JS拉起或下载app的实现代码
2017/02/22 Javascript
编写React组件项目实践分析
2018/03/04 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
2018/04/26 jQuery
点击按钮弹出模态框的一系列操作代码实例
2019/03/29 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
2019/06/03 Javascript
vue中移动端调取本地的复制的文本方式
2020/07/18 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
[01:57]2016完美“圣”典风云人物:国士无双专访
2016/12/04 DOTA
python根据文件大小打log日志
2014/10/09 Python
举例讲解Django中数据模型访问外键值的方法
2015/07/21 Python
python实现list由于numpy array的转换
2018/04/04 Python
Django框架封装外部函数示例
2019/05/28 Python
django用户登录验证的完整示例代码
2019/07/21 Python
pymysql 开启调试模式的实现
2019/09/24 Python
ALDO英国官网:加拿大女鞋品牌
2018/02/19 全球购物
世界上最大的隐形眼镜商店:1-800 Contacts
2018/11/03 全球购物
园林施工员岗位职责
2013/12/11 职场文书
槐乡的孩子教学反思
2014/04/27 职场文书
幼儿园园长新年寄语2015
2014/12/08 职场文书
初三毕业感言
2015/07/31 职场文书
2015年国庆节寄语
2015/08/17 职场文书
2016年教师党员创先争优承诺书
2016/03/24 职场文书
导游词之湖州-太湖
2019/10/11 职场文书
南阳市白酒市场的调查报告
2019/11/08 职场文书
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android