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


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 相关文章推荐
jscript之List Excel Color Values
Jun 13 Javascript
js实现的类似于asp数据字典的数据类型代码实例
Sep 03 Javascript
详解 javascript中offsetleft属性的用法
Nov 11 Javascript
AngularJS  $modal弹出框实例代码
Aug 24 Javascript
关于javascript的一些知识以及循环详解
Sep 12 Javascript
jQuery实现html双向绑定功能示例
Oct 09 jQuery
JS基于递归实现网页版计算器的方法分析
Dec 20 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
Mar 29 Javascript
Node.js 使用AngularJS的方法示例
May 11 Javascript
ES6基础之字符串和函数的拓展详解
Aug 22 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
Oct 23 Javascript
前端vue+elementUI如何实现记住密码功能
Sep 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中SSO Cookie登录分析和实现
2015/11/06 PHP
php中遍历二维数组并以表格的形式输出的方法
2017/01/03 PHP
PHP简单实现合并2个数字键数组值的方法
2017/05/30 PHP
javascript 使用 NodeList需要注意的问题
2013/03/04 Javascript
固定网页背景图同时保持图片比例的思路代码
2013/08/15 Javascript
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
jquery 取子节点及当前节点属性值
2014/07/25 Javascript
基于Turn.js 实现翻书效果实例解析
2016/06/20 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
2016/12/08 Javascript
在angular 6中使用 less 的实例代码
2018/05/13 Javascript
Vue.js 十五分钟入门图文教程
2018/09/12 Javascript
Vue递归实现树形菜单方法实例
2018/11/06 Javascript
js数组去重的方法总结
2019/01/18 Javascript
详解JavaScript 为什么要有 Symbol 类型?
2019/04/03 Javascript
NodeJs操作MongoDB教程之分页功能以及常见问题
2019/04/09 NodeJs
jquery实现简单拖拽效果
2020/07/20 jQuery
在Python中用keys()方法返回字典键的教程
2015/05/21 Python
Python素数检测实例分析
2015/06/15 Python
Python之文字转图片方法
2018/05/10 Python
Python多线程原理与用法详解
2018/08/20 Python
python中几种自动微分库解析
2019/08/29 Python
Python Collatz序列实现过程解析
2019/10/12 Python
python的slice notation的特殊用法详解
2019/12/27 Python
Python判断三段线能否构成三角形的代码
2020/04/12 Python
PyTorch: Softmax多分类实战操作
2020/07/07 Python
python em算法的实现
2020/10/03 Python
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
销售文员岗位职责
2013/11/29 职场文书
金融管理专业求职信
2014/07/10 职场文书
幼儿园三八妇女节活动总结
2015/02/06 职场文书
2015新学期校长寄语(3篇)
2015/03/25 职场文书
总经理致辞
2015/07/29 职场文书
2016年党员公开承诺书范文
2016/03/24 职场文书
详解php中流行的rpc框架
2021/05/29 PHP
MySql重置root密码 --skip-grant-tables
2022/04/11 MySQL