用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 新手教程 入门系列 查看内容

微信小程序-隐藏和显示自定义的导航

Rolan 2017-6-14 00:41

微信小程序中不能直接操作window对象,document文档,跟html的树结构不相同。实现类似导航的隐藏显示,如图效果:点击网络显示或隐藏网络中包含的内容。其他类似。如果是jquery很方便实现,能直接操作document。在微 ...

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

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

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

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

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

wxml 代码:

  1. <!--index.wxml-->
  2. <view class="navView" bindtap="tigger" data-num="1">视图容器</view>
  3. <view class="classname" hidden="{{view1}}">
  4. <button bindtap="opentype" data-type="view">view</button>
  5. <button bindtap="opentype" data-type="movable">movable</button>
  6. </view>
  7. <view class="navView" bindtap="tigger" data-num="2">基础内容</view>
  8. <view class="classname" hidden="{{view2}}">
  9. <button bindtap="opentype" data-type="icon">icon</button>
  10. <button bindtap="opentype" data-type="text">
鲜花
鲜花 (4)
鸡蛋
鸡蛋

刚表态过的朋友 (4 人)

分享至 : QQ空间
收藏
原作者: 统哥 来自: 博客园

相关阅读