微信小程序动态的显示或隐藏控件的方法(两种方法)

 更新时间:2017年01月25日 08:53:43   作者:bright789  
在微信小程序开发时,经常要用到一个控件会根据不同的情况和环境动态显示与隐藏这种情况,下面就来实践一下吧

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

它的实现方法有两种,

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

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

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

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

   这种办法一开始看有点头晕,所以把它分解成两个状态:

显示状态:

因为showView是true,所以我们把它转成如下样子

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

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

相当于如下代码:

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

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

Js文件:

Page({
 data:{
 showView:true
 },
 onLoad:function(options){
 // 生命周期函数--监听页面加载
 showView:(options.showView=="true"?true:false)
 }
 ,onChangeShowState:function(){
 var that=this;
 that.setData({
  showView:(!that.data.showView)
 })
 }
})

Wxml文件代码:

<viewclass="page">
 <view >
  <buttonbindtap="onChangeShowState">{{showView?'隐藏':'显示'}}</button>
 </view>
 <view class="bright789_view_hide{{showView?'bright789_view_show':''}}">
 <textclass="bright789-text">我是被显示被隐藏控件</text>
 </view>
</view>

Wxss文件代码:

.bright789-text{
 font-size: 40rpx;
 line-height: 40px;
 color: #ff0000;
}
.bright789_view_hide{
 display: none;
}
.bright789_view_show{
 display: block;
}

相关文章

  • Android自定义控件实现下拉刷新效果

    Android自定义控件实现下拉刷新效果

    这篇文章主要为大家详细介绍了Android自定义控件实现下拉刷新效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • Android编程使用AlarmManager设置闹钟的方法

    Android编程使用AlarmManager设置闹钟的方法

    这篇文章主要介绍了Android编程使用AlarmManager设置闹钟的方法,结合具体实例分析了Android基于AlarmManager实现闹钟功能的设置、取消、显示等相关操作技巧,需要的朋友可以参考下
    2017-03-03
  • 设置Android系统永不锁屏永不休眠的方法

    设置Android系统永不锁屏永不休眠的方法

    在进行Android系统开发的时候,有些特定的情况需要设置系统永不锁屏,永不休眠。本篇文章给大家介绍Android 永不锁屏,开机不锁屏,删除设置中休眠时间选项,需要的朋友一起学习吧
    2016-03-03
  • Android动态模糊效果的快速实现方法

    Android动态模糊效果的快速实现方法

    这篇文章主要介绍了Android动态模糊效果的快速实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • Android Apt之Activity Route的示例

    Android Apt之Activity Route的示例

    本篇文章主要介绍了Android Apt之Activity Route的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • Android计时器chronometer使用实例讲解

    Android计时器chronometer使用实例讲解

    这篇文章主要为大家详细介绍了Android计时器chronometer使用实例,介绍了Android计时器chronometer基本使用方法,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • Android手机卫士之获取联系人信息显示与回显

    Android手机卫士之获取联系人信息显示与回显

    这篇文章主要介绍了Android手机卫士之获取联系人信息显示与回显的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • Android端权限隐私的合规化处理实战记录

    Android端权限隐私的合规化处理实战记录

    大家应该都发现了,现在很多应用市场都要求应用上架需要用户协议,这篇文章主要给大家介绍了关于Android端权限隐私合规化处理的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2021-08-08
  • Android提高之蓝牙传感应用实例

    Android提高之蓝牙传感应用实例

    这篇文章主要介绍了Android的蓝牙传感应用实例,对于Android项目开发来说非常实用,需要的朋友可以参考下
    2014-08-08
  • Android选项菜单用法实例分析

    Android选项菜单用法实例分析

    这篇文章主要介绍了Android选项菜单用法,以完整实例形式较为详细分析了Android选项菜单的布局及功能实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09

最新评论