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


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 相关文章推荐
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 Javascript
iframe 自适应高度[在IE6 IE7 FF下测试通过]
Apr 13 Javascript
jQuery 使用手册(一)
Sep 23 Javascript
javascript 面向对象全新理练之原型继承
Dec 03 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
Mar 05 Javascript
用js格式化金额可设置保留的小数位数
May 09 Javascript
jQuery中closest()函数用法实例
Jan 07 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
Dec 18 Javascript
Google 地图事件实例讲解
Aug 06 Javascript
详谈javascript精度问题与调整
Jul 08 Javascript
vue3 源码解读之 time slicing的使用方法
Oct 31 Javascript
javascript数组includes、reduce的基本使用
Jul 02 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 魔术函数使用说明
2010/02/21 PHP
PHP 设置MySQL连接字符集的方法
2011/01/02 PHP
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
php按百分比生成缩略图的代码分享
2014/05/10 PHP
学习php开源项目的源码指南
2014/12/21 PHP
php返回字符串中所有单词的方法
2015/03/09 PHP
php微信开发之上传临时素材
2016/06/24 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
js实现连续英文字符自动换行兼容ie6 ie7和firefox
2013/09/06 Javascript
父页面显示遮罩层弹出半透明状态的dialog
2014/03/04 Javascript
js实现点击链接后窗口缩小并居中的方法
2015/03/02 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
2015/09/12 Javascript
原生JS实现简单放大镜效果
2017/02/08 Javascript
Vue 2.0学习笔记之Vue中的computed属性
2017/10/16 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
用vue2.0实现点击选中active其他选项互斥的效果
2018/04/12 Javascript
浅谈ElementUI中switch回调函数change的参数问题
2018/08/24 Javascript
vue下载excel的实现代码后台用post方法
2019/05/10 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
2020/04/09 Javascript
vue接口请求加密实例
2020/08/11 Javascript
[04:05]TI9战队采访 - Natus Vincere
2019/08/22 DOTA
python用于url解码和中文解析的小脚本(python url decoder)
2013/08/11 Python
部署Python的框架下的web app的详细教程
2015/04/30 Python
Python设计模式之享元模式原理与用法实例分析
2019/01/11 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
Python3 itchat实现微信定时发送群消息的实例代码
2019/07/12 Python
PyQt5多线程刷新界面防假死示例
2019/12/13 Python
python内置模块collections知识点总结
2019/12/19 Python
基于Python的Jenkins的二次开发操作
2020/05/12 Python
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
英国儿童图书网站:Scholastic
2017/03/26 全球购物
bonprix匈牙利:女士、男士和儿童服装
2019/07/19 全球购物
高校教师思想汇报
2014/01/11 职场文书
2014法院四风问题对照检查材料思想汇报
2014/10/04 职场文书
员工试用期转正自我评价
2015/03/10 职场文书
MySQL 数据类型详情
2021/11/11 MySQL