微信小程序动态的显示或隐藏控件
来源:互联网 发布:剑三成男纯阳捏脸数据 编辑:程序博客网 时间:2024/05/21 10:48
在微信小程序开发时,经常要用到一个控件会根据不同的情况和环境动态显示与隐藏这种情况,下面就来实践一把!上效果先
它的实现方法有两种,
第一种方法:单选法,就是隐藏与显示根据条件二选一,代码如下:
<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;
}
- 微信小程序动态的显示或隐藏控件
- 【微信小程序】小程序动态显示和隐藏某个控件
- 微信小程序 —— 动态决定页面元素显示或隐藏的技巧
- [VB.Net]Browsable的使用/隐藏或显示控件属性
- js-标签或控件的显示与隐藏
- Jquery实现动态效果的显示和隐藏控件
- ListView动态显示或隐藏FooterView
- 小程序button控件上下边框的显示和隐藏
- android 如何让应用程序在主菜单[launcher]程序列表中动态显示或隐藏
- 显示或隐藏程序任务栏图标
- 微信小程序:隐藏控件
- android api 中setVisibility( )的用法(可显示或隐藏布局或控件...)
- JS设置隐藏或者显示,不刷新页面的情况下动态设置其显示或隐藏
- datagrid中动态显示或隐藏某一列的方法(根据条件判断显示和隐藏)
- 客户端控件的显示/隐藏
- 显示隐藏控件的属性
- 控件的显示隐藏方法
- 动态设置Ext.form.FormPanel控件里子控件的显示和隐藏
- 【OTT】欧盟计划修改电子隐私指令 首次将OTT服务提供商纳入监管
- 【Leetcode】191. Number of 1 Bits
- 谷歌Chrome浏览器提示adobe flash player已过期完美解决办法
- 【算法】程序猿不写代码是不对的11
- 277. Find the Celebrity
- 微信小程序动态的显示或隐藏控件
- KiCad设计PCB-23-封装检查-生成网络表-导入
- How To Remote Desktop from windows to Linux
- Linux 下安装 gcc6.3.0
- KiCad设计PCB-24-画电路板的边框
- 0124
- 公布2017年博士生招生资格审核制的审核结果
- KiCad设计PCB-25-安装孔的制作和摆放
- 嵌入式USB上位机的制作