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


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 相关文章推荐
jQuery选择头像并实时显示的代码
Jun 27 Javascript
jquery中dom操作和事件的实例学习-表单验证
Nov 30 Javascript
javascript打印大全(打印页面设置/打印预览代码)
Mar 29 Javascript
JavaScript中的lastIndexOf()方法使用详解
Jun 06 Javascript
浅谈JavaScript字符串拼接
Jun 25 Javascript
Web Uploader文件上传插件使用详解
May 10 Javascript
jQuery实现的简单拖拽功能示例
Sep 13 Javascript
js实现适合新闻类图片的轮播效果
Feb 05 Javascript
js return返回多个值,通过对象的属性访问方法
Feb 21 Javascript
解决AngualrJS页面刷新导致异常显示问题
Apr 20 Javascript
JS内置对象和Math对象知识点详解
Apr 03 Javascript
Vue如何跨组件传递Slot的实现
Dec 14 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
动态生成gif格式的图像要注意?
2006/10/09 PHP
关于php正则匹配汉字的方法介绍
2013/04/25 PHP
PHP程序漏洞产生的原因分析与防范方法说明
2014/03/06 PHP
PHP中一些可以替代正则表达式函数的字符串操作函数
2014/11/17 PHP
PHP实现导出带样式的Excel
2016/08/28 PHP
PHP获取二叉树镜像的方法
2018/01/17 PHP
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
防止按钮在短时间内被多次点击的方法
2014/03/10 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
2015/08/12 Javascript
QQ登录背景闪动效果附效果演示源码下载
2015/09/22 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
2015/10/20 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
2016/05/05 Javascript
检查表单元素的值是否为空的实例代码
2016/06/16 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
nodejs结合socket.io实现websocket通信功能的方法
2018/01/12 NodeJs
JavaScript设计模式之装饰者模式定义与应用示例
2018/07/25 Javascript
微信小程序云开发之数据库操作
2019/05/18 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
2020/07/11 Javascript
[07:37]DOTA2-DPC中国联赛2月2日Recap集锦
2021/03/11 DOTA
Python实现的计算器功能示例
2018/04/26 Python
Python拼接字符串的7种方法总结
2018/11/01 Python
python的移位操作实现详解
2019/08/21 Python
window7下的python2.7版本和python3.5版本的opencv-python安装过程
2019/10/24 Python
python 计算概率密度、累计分布、逆函数的例子
2020/02/25 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
Python类的绑定方法和非绑定方法实例解析
2020/03/04 Python
pandas使用函数批量处理数据(map、apply、applymap)
2020/11/27 Python
纯css3制作网站后台管理面板
2014/12/30 HTML / CSS
Intersport西班牙:在线体育商店
2019/11/06 全球购物
物流专业求职计划书
2014/01/10 职场文书
好军嫂事迹材料
2014/01/15 职场文书
先进个人获奖感言
2014/01/24 职场文书
班级文化标语
2014/06/23 职场文书
2015年小学教科研工作总结
2015/07/20 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书
Nginx反向代理至go-fastdfs案例讲解
2021/08/02 Servers