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

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

它的实现方法有两种，

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

<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;
}

# 微信小程序  # 控件隐藏  # 微信小程序调用摄像头隐藏式拍照功能  # 微信小程序 实现动态显示和隐藏某个控件  # 微信小程序 scroll-view隐藏滚动条详解  # 微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件  # 微信小程序之滑动页面隐藏和显示组件功能的实现代码  # 我是  # 把它  # 种方法  # 周期函数  # 我把  # 不动  # 要用  # 这种情况  # 会把  # 就来  # 有两种  # 转成  # 程序开发  # 单选  # 看到了  # 加载  # gt  # bright789_view_hide  # bright789_view_show  # 微信小 

相关文章： 建站之家VIP精选网站模板与SEO优化教程整合指南  c# 在高并发场景下，委托和接口调用的性能对比  如何在万网自助建站平台快速创建网站？  中山网站推广排名,中山信息港登录入口？  SQL查询语句优化的实用方法总结  如何选择高效响应式自助建站源码系统？  如何在Windows 2008云服务器安全搭建网站？  如何制作公司的网站链接,公司想做一个网站，一般需要花多少钱？  小视频制作网站有哪些,有什么看国内小视频的网站，求推荐？  制作网站的网址是什么,请问后缀为.com和.com.cn还有.cn的这三种网站是分别是什么类型的网站？  宝塔面板如何快速创建新站点？  平台云上自主建站：模板化设计与智能工具打造高效网站  无锡营销型网站制作公司,无锡网选车牌流程？  再谈Python中的字符串与字符编码（推荐）  家庭服务器如何搭建个人网站？  制作网站怎么制作,*游戏网站怎么搭建？  如何快速搭建二级域名独立网站？  最好的网站制作公司,网购哪个网站口碑最好，推荐几个？谢谢？  微信小程序 五星评分(包括半颗星评分)实例代码  建站主机类型有哪些？如何正确选型  重庆市网站制作公司,重庆招聘网站哪个好？  如何通过WDCP绑定主域名及创建子域名站点？  香港代理服务器配置指南：高匿IP选择、跨境加速与SEO优化技巧  如何用美橙互联一键搭建多站合一网站？  建站主机是否属于云主机类型？  成都品牌网站制作公司,成都营业执照年报网上怎么办理？  建站之星会员如何解锁更多建站功能？  手机网站制作与建设方案,手机网站如何建设？  手机网站制作平台,手机靓号代理商怎么制作属于自己的手机靓号网站？  建站之星安装需要哪些步骤及注意事项？  专业网站制作服务公司,有哪些网站可以免费发布招聘信息？  北京网站制作公司哪家好一点,北京租房网站有哪些？  ,想在网上投简历，哪几个网站比较好？  高端云建站费用究竟需要多少预算？  建站之星在线版空间：自助建站+智能模板一键生成方案  ,购物网站怎么盈利呢？  太原网站制作公司有哪些,网约车营运证查询官网？  nginx修改上传文件大小限制的方法  网站网页制作专业公司,怎样制作自己的网页？  如何通过二级域名建站提升品牌影响力？  头像制作网站在线观看,除了站酷，还有哪些比较好的设计网站？  如何制作新型网站程序文件,新型止水鱼鳞网要拆除吗？  网站制作需要会哪些技术,建立一个网站要花费多少？  C#如何序列化对象为XML XmlSerializer用法  C++如何使用std::optional？（处理可选值）  宝塔建站无法访问？如何排查配置与端口问题？  学校为何禁止电信移动建设网站？  网站设计制作企业有哪些,抖音官网主页怎么设置？  建站主机CVM配置优化、SEO策略与性能提升指南  linux top下的 minerd 木马清除方法