用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

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

微信小程序动态的显示或隐藏控件,带参传递的界面跳转的两种方式 ...

天下雪 2017-2-3 17:36

作者:bright789,来自原文地址一:动态的显示或隐藏控件在微信小程序开发时,经常要用到一个控件会根据不同的情况和环境动态显示与隐藏这种情况,下面就来实践一把!上效果先它的实现方法有两种:第一种方法:单选 ...

作者:bright789,来自原文地址

一:动态的显示或隐藏控件

微信小程序开发时,经常要用到一个控件会根据不同的情况和环境动态显示与隐藏这种情况,下面就来实践一把!上效果先

它的实现方法有两种:

第一种方法:单选法,就是隐藏与显示根据条件二选一,代码如下:

  1. <view class="{{showView?'bright789_view_show':'bright789_view_hide'}}">
  2. <text class="bright789-text">我是被显示被隐藏控件</text>
  3. </view>

第二种方法:叠加法,就是先隐藏,如果是显示,再叠加一个显示,如果是隐藏就不动,代码如下:

  1. <view class="bright789_view_hide {{showView?'bright789_view_show':''}}">
  2. <text class="bright789-text">我是被显示被隐藏控件</text>
  3. </view>

这种办法一开始看有点头晕,所以把它分解成两个状态: 
显示状态: 
因为showView是true,所以我们把它转成如下样子

  1. <view class="bright789_view_hide bright789_view_show}">
  2. <text class="bright789-text">我是被显示被隐藏控件</text>
  3. </view>

看到了吧,后面的bright789_view_show会把前面的bright789_view_hide重叠上去,注意这里是重叠,所以顺序不能反过来像bright789_view_show {{showView?'':' bright789_view_show '}}这种是不行的 
隐藏状态: 
相当于如下代码:

  1. <view class="bright789_view_hide }">
  2. <text class="bright789-text">我是被显示被隐藏控件</text>
  3. </view>

最后我把demo的js,wxml和wxss代码贴一下: 
Js文件:

  1. Page({
  2. data:{
  3. showView:true
  4. },
  5. onLoad:function(options){
  6. // 生命周期函数--监听页面加载
  7. showView:(options.showView=="true"?true:false)
  8. }
  9. ,onChangeShowState:function(){
  10. var that=this;
  11. that.setData({
  12. showView:(!that.data.showView)
  13. })
  14. }
  15. })

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
来自: 原文地址

相关阅读