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


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操作时间(年-月-日 时-分-秒 星期几)
Jun 20 Javascript
Js 回车换行处理的办法及replace方法应用
Jan 24 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
Jun 05 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
Dec 14 Javascript
概述VUE2.0不可忽视的很多变化
Sep 25 Javascript
vue2中filter()的实现代码
Jul 09 Javascript
iscroll.js滚动加载实例详解
Jul 18 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
Dec 19 Javascript
解决vue中修改了数据但视图无法更新的情况
Aug 27 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
Dec 03 Javascript
如何优雅地在vue中添加权限控制示例详解
Mar 07 Javascript
js实现GIF图片的分解和合成
Oct 24 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
一个可查询所有表的“通用”查询分页类
2006/10/09 PHP
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
PHP chop()函数讲解
2019/02/11 PHP
利用cookie记住背景颜色示例代码
2013/11/04 Javascript
JavaScript设计模式之单件模式介绍
2014/12/28 Javascript
JavaScript中的Math.LN2属性用法详解
2015/06/12 Javascript
深入分析JSON编码格式提交表单数据
2015/06/25 Javascript
js实现打地鼠小游戏
2017/02/13 Javascript
JS闭包用法实例分析
2017/03/27 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
2017/04/12 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
2018/02/18 jQuery
基于element-ui组件手动实现单选和上传功能
2018/12/06 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
2020/08/14 Javascript
vue-video-player视频播放器使用配置详解
2020/10/23 Javascript
[06:24]DOTA2 2015国际邀请赛中国区预选赛第二日TOP10
2015/05/27 DOTA
用Python逐行分析文件方法
2019/01/28 Python
selenium 安装与chromedriver安装的方法步骤
2019/06/12 Python
python粘包问题及socket套接字编程详解
2019/06/29 Python
使用 python pyautogui实现鼠标键盘控制功能
2019/08/04 Python
Python3实现配置文件差异对比脚本
2019/11/18 Python
Python grequests模块使用场景及代码实例
2020/08/10 Python
python中用ggplot绘制画图实例讲解
2021/01/26 Python
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
2016/12/20 HTML / CSS
Lookfantastic香港官网:英国知名美妆购物网站
2018/06/19 全球购物
加拿大户外探险购物网站:SAIL
2020/06/27 全球购物
用Python匹配HTML tag的时候,<.*>和<.*?>有什么区别
2012/11/04 面试题
总经理秘书工作职责
2013/12/26 职场文书
经贸日语专业个人求职信范文
2014/04/29 职场文书
监察建议书格式
2014/05/19 职场文书
通信工程专业求职信
2014/06/04 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
空气的环保标语
2014/06/12 职场文书
胡桃夹子观后感
2015/06/11 职场文书
法制教育讲座心得体会
2016/01/14 职场文书
mysql 生成连续日期及变量赋值
2022/03/20 MySQL