从品牌网站建设到网络营销策划,从策略到执行的一站式服务
在微信小程序开发时,经常要用到一个控件会根据不同的情况和环境动态显示与隐藏这种情况,下面就来实践一把!上效果先
创新互联公司主营利川网站建设的网络公司,主营网站建设方案,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; }
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图