微信小程序动态的显示或隐藏控件的方法(两种方法)
更新时间：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 中TextureView和SurfaceView的属性方法及示例说明
这篇文章主要介绍了Android 中TextureView和SurfaceView的属性方法及示例说明，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-06-06
这篇文章主要介绍了Android编程实现悬浮窗获取并显示当前内存使用量的方法,涉及Android针对窗口及内存的相关操作技巧,需要的朋友可以参考下2017-07-07
Android开发笔记之:一分钟学会使用Logcat调试程序的详解
本篇文章是对Android中Logcat调试程序的使用进行了详细的分析介绍，需要的朋友参考下2013-05-05
这篇文章主要为大家详细介绍了Android自定义控件之圆形进度条动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-07-07
这篇文章主要为大家详细介绍了android实现桌面移动悬浮窗口，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
Kotlin语言中CompileSdkVersion与targetSdkVersion的区别浅析
这篇文章主要介绍了Kotlin语言中CompileSdkVersion和targetSdkVersion有什么区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-02-02
这篇文章主要介绍了android使用popupwindow创建菜单的示例,需要的朋友可以参考下2014-02-02
这篇文章主要为大家详细介绍了Android基于百度语音的语音交互功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
Android 布局中的android:onClick的使用方法总结
这篇文章主要介绍了Android 布局中的android:onClick的使用方法总结的相关资料,设置点击时从上下文中调用指定的方法，这里提供实例帮助大家理解这部分内容，需要的朋友可以参考下2017-08-08
本篇文章主要介绍了Android解析json数据示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
最新评论