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

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

创新互联公司主营利川网站建设的网络公司,主营网站建设方案,app开发定制,利川h5微信小程序定制开发搭建,利川网站营销推广欢迎利川等地区企业咨询

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

它的实现方法有两种,

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


 我是被显示被隐藏控件
 

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


 我是被显示被隐藏控件
 

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

显示状态:

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


 我是被显示被隐藏控件
 

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

相当于如下代码:


 我是被显示被隐藏控件
 

最后我把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文件代码:


 
  {{showView?'隐藏':'显示'}}
 
 
 我是被显示被隐藏控件
 

Wxss文件代码:

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

本文题目:微信小程序动态的显示或隐藏控件的方法(两种方法)
文章源于:http://bzwzjz.com/article/pgjhcs.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 重庆企业网站建设 成都网站设计公司 盐亭网站设计 网站制作 成都网站制作 成都网站制作 营销型网站建设 网站设计 企业网站设计 四川成都网站制作 重庆电商网站建设 网站设计 成都网站制作 品牌网站建设 H5网站制作 企业网站制作 成都网站设计 响应式网站建设 上市集团网站建设 成都商城网站制作 手机网站制作设计 成都响应式网站建设公司