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


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 相关文章推荐
对YUI扩展的Gird组件 Part-2
Mar 10 Javascript
鼠标滑过出现预览的大图提示效果
Feb 26 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
Nov 13 Javascript
js表头排序实现方法
Jan 16 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
Jun 03 Javascript
详解JavaScript 中的 replace 方法
Jan 01 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
Sep 26 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
Aug 06 Javascript
layui 解决富文本框form表单提交为空的问题
Oct 26 Javascript
vue 组件销毁并重置的实现
Jan 13 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 Javascript
Vue3.0 手写放大镜效果
Jul 25 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
Windows Apache2.2.11及Php5.2.9-1的安装与配置方法
2009/06/08 PHP
php expects parameter 1 to be resource, array given 错误
2011/03/23 PHP
解析dedeCMS验证码的实现代码
2013/06/07 PHP
Javascript学习笔记4 Eval函数
2010/01/11 Javascript
jQuery.prop() 使用详解
2015/07/19 Javascript
fullpage.js全屏滚动插件使用实例
2016/09/06 Javascript
Angularjs CURD 详解及实例代码
2016/09/14 Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
2017/04/01 Javascript
JavaScript中最常用的10种代码简写技巧总结
2017/06/28 Javascript
JavaScript实现百度搜索框效果
2020/03/26 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
2018/07/09 Javascript
layDate日期控件使用方法详解
2018/11/15 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
2019/02/02 Javascript
vue多层嵌套路由实例分析
2019/03/19 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
vue使用过滤器格式化日期
2021/01/20 Vue.js
pyramid配置session的方法教程
2013/11/27 Python
最近Python有点火? 给你7个学习它的理由!
2017/06/26 Python
python基于http下载视频或音频
2018/06/20 Python
Python从单元素字典中获取key和value的实例
2018/12/31 Python
Python闭包和装饰器用法实例详解
2019/05/22 Python
python绘制雪景图
2019/12/16 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
keras导入weights方式
2020/06/12 Python
详解Python中list[::-1]的几种用法
2020/11/16 Python
国外平面设计第一市场:99designs
2016/10/25 全球购物
英国第一的市场和亚马逊替代品:OnBuy
2019/03/16 全球购物
出口公司经理求职简历中的自我评价
2013/10/13 职场文书
冰淇淋店创业计划书范文
2013/12/27 职场文书
安全责任书怎么写
2014/07/28 职场文书
拾金不昧表扬信怎么写
2015/05/04 职场文书
综治目标管理责任书
2015/05/11 职场文书
小学教师读书笔记
2015/07/01 职场文书
机械生产实习心得体会
2016/01/22 职场文书
浅谈MySQL next-key lock 加锁范围
2021/06/07 MySQL