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

前端之家收集整理的这篇文章主要介绍了微信小程序自定义导航隐藏和显示功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

微信小程序中不能直接操作window对象,document文档,跟html的树结构不相同。

实现类似导航的隐藏显示,如图效果

点击网络显示或隐藏网络中包含的内容。其他类似。

如果是jquery很方便实现,能直接操作document。在微信小程序中实现思路是:在逻辑层定义变量,通过setData赋值。

方法一:通过变量直接赋值,给每一个要控制显示的view定义变量

.wxml 代码

.js对应代码

通过data-num="1" 这中传值方式,设置对应的view1的值。

这种方法能够实现效果,但是在添加了新的view之后需要修改js代码,所以不是最优的方法

方法二:

.wxml 代码

上传、下载

.js对应代码

页面的初始数据 */ 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也能控制隐藏显示

以上所述是小编给大家介绍的微信小程序自定义导航隐藏和显示功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的微信小程序相关文章