频道栏目
首页 > 程序开发 > 移动开发 > 其他 > 正文
微信小程序动态的显示或隐藏控件
2017-01-25 10:20:49         来源:bright789的博客  
收藏   我要投稿

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

 

\

 

它的实现方法有两种,

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

我是被显示被隐藏控件

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

我是被显示被隐藏控件

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

显示状态:

因为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;

}

 

点击复制链接 与好友分享!回本站首页
相关TAG标签 微信小程序
上一篇:Cocos2d-x 3.x 图形学渲染系列二十三
下一篇:Java 的单例模式写法
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站