微信小程序-隐藏和显示自定义的导航
微信小程序中不能直接操作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也能控制隐藏显示。
一点小技巧分享。
微信小程序-隐藏和显示自定义的导航的更多相关文章
- 微信小程序(18)-- 自定义头部导航栏
最近做的项目涉及相应的页面显示相应的顶部标题,所以就需要自定义头部导航了. 首先新建一个顶部导航公用组件topnav,导航高度怎么计算? 1.wx.getSystemInfo 和 wx.getSyst ...
- 微信小程序入坑之自定义组件
前言 最近接触微信小程序,再次之前公司用的前端框架是vue ,然后对比发现,开发小程序是各种限制,对于开发者非常不友好.各种槽点太多,完全吐槽不过来,所以在此不多说,打算下次专门写一篇文章吐槽一下.本 ...
- 微信小程序API交互的自定义封装
目录 1,起因 2,优化成果 3,实现思路 4,完整代码 1,起因 哪天,正在蚂蚁森林疯狂偷能量的我被boss叫过去,告知我司要做一个线上直播公开课功能的微信小程序,博主第一次写小程序,复习了下文档, ...
- 微信小程序省市区联动,自定义地区字典
最近在做一个项目的时候遇到了这么一个问题,就是省市区的联动呢,我们需要自定义字典来设置,那么微信小程序自带的省市区选择就不能用了,经过三根烟的催化,终于写出来了.下面献上代码示例. 首先是在utils ...
- 微信小程序animation有趣的自定义动画
这几天在看代码时遇到了一些问题:关于微信小程序的animation自定义动画自己没有系统的学习过 做动画需要我们将一个复杂的动作过程,拆解为一步一步的小节过程 微信中已经为我们写好了端口我们只需要实例 ...
- 微信小程序学习笔记四 自定义组件
1. 自定义组件 类似Vue或react中的自定义组件 小程序允许我们使用自定义组件的方式来构建页面 1.1 创建自定义组件 类似于页面, 一个自定义组件由json wxml wxss js 4个文件 ...
- 微信小程序tabBar 不显示底部菜单的原因和解决方法
1,书写,正确书写时tabBar,不要写成tabbar!!! 2,当创建新工程时,app.json中Pages配置是这样的 ,,[图1], 注意:微信小程序里面的json文件时不能注释的,图中只是给读 ...
- 微信小程序各类型的自定义组件篇
由于本人最近在开发小程序项目,期间对小程序有花点时间去研究,同时也找了网上大牛的一些案例,在这里分享部分自定义组件,部分代码是copy大牛案例的,有对小程序有兴趣的伙伴拿走,不谢! 源码下载地址:ht ...
- 微信小程序隐藏滚动条
全局wxss中添加以下样式,可以隐藏所有的滚动条: 包括使用scroll-view组件或者使用overflow-y:scroll;而出现的滚动条: 无论竖向横向滚动条都可隐藏: ::-webkit-s ...
随机推荐
- UVa 714 Copying Books - 二分答案
求使最大值最小,可以想到二分答案. 然后再根据题目意思乱搞一下,按要求输出斜杠(这道题觉得就这一个地方难). Code /** * UVa * Problem#12627 * Accepted * T ...
- FTP-Linux中ftp服务器搭建
一.FTP工作原理 (1)FTP使用端口 [root@localhost ~]# cat /etc/services | grep ftp ftp-data 20/tcp #数据链路:端口20 ftp ...
- python3+pyqt5 +eric5安装配置
一.大纲内容: 1.预备PC环境: 2.预备安装程序: 2.1.下载Python3.2 2.2.下载PyQt4 2.3.下载Eric5 3.安装配置步骤: 3.1.安装Pyhon3.2 3.2.安装P ...
- Springboot2.x 集成redis
pom.xml 添加 <dependency> <groupId>org.springframework.boot</groupId> <artifactId ...
- Visual Studio 项目模板制作(一)
我们编写项目的时候,很多时候都是在写重复代码,比如一个比较完整的框架,然后下面有很多代码都是重复的Copy,其实我们可以利用Visual Studio的模板替我们干这些活,我们只要关注项目具体的业务就 ...
- Java 文件夹递归遍历
import java.io.File; public class Demo1 { public static void main(String[] args) { File dir=new File ...
- c++ 二分法查找(binary_search)
#include <iostream> // cout #include <algorithm> // binary_search, sort #include <vec ...
- [ios]object-c math.h里的数学计算公式介绍
参考:http://blog.csdn.net/yuhuangc/article/details/7639117 头文件:<math.h> 1. 三角函数 double sin (dou ...
- select 操作
一:JavaScript 1:拿到select对象: var myselect=document.getElementById(“test”); 2:拿到选中项的索引:var index=mysele ...
- 【Golang 接口自动化06】微信支付md5签名计算及其优化
前言 可能看过我博客的朋友知道我主要是做的支付这一块的测试工作.而我们都知道现在比较流行的支付方式就是微信支付和支付宝支付,当然最近在使用低手续费大力推广的京东金融(已改名为京东数科)以后也可能站到第 ...