微信小程序動(dòng)態(tài)的顯示或隱藏控件的方法(兩種方法)
在微信小程序開發(fā)時(shí)，經(jīng)常要用到一個(gè)控件會(huì)根據(jù)不同的情況和環(huán)境動(dòng)態(tài)顯示與隱藏這種情況，下面就來(lái)實(shí)踐一把！上效果先
它的實(shí)現(xiàn)方法有兩種，
第一種方法：單選法，就是隱藏與顯示根據(jù)條件二選一，代碼如下:
<view class="{{showView?'bright789_view_show':'bright789_view_hide'}}">
<text class="bright789-text">我是被顯示被隱藏控件</text>
</view>
第二種方法：疊加法，就是先隱藏，如果是顯示，再疊加一個(gè)顯示，如果是隱藏就不動(dòng)，代碼如下：
<view class="bright789_view_hide {{showView?'bright789_view_show':''}}">
<text class="bright789-text">我是被顯示被隱藏控件</text>
</view>
這種辦法一開始看有點(diǎn)頭暈，所以把它分解成兩個(gè)狀態(tài)：
顯示狀態(tài):
因?yàn)閟howView是true，所以我們把它轉(zhuǎn)成如下樣子
<view class="bright789_view_hide bright789_view_show}"> <text class="bright789-text">我是被顯示被隱藏控件</text> </view>
看到了吧，后面的bright789_view_show會(huì)把前面的bright789_view_hide重疊上去，注意這里是重疊，所以順序不能反過(guò)來(lái)像bright789_view_show {{showView?'':' bright789_view_show '}}這種是不行的
隱藏狀態(tài):
相當(dāng)于如下代碼:
<view class="bright789_view_hide }"> <text class="bright789-text">我是被顯示被隱藏控件</text> </view>
最后我把demo的js,wxml和wxss代碼貼一下:
Js文件:
Page({
data:{
showView:true
},
onLoad:function(options){
// 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
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;
}
相關(guān)文章
Android?中TextureView和SurfaceView的屬性方法及示例說(shuō)明
這篇文章主要介紹了Android?中TextureView和SurfaceView的屬性方法及示例說(shuō)明，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-06-06
Android編程實(shí)現(xiàn)懸浮窗獲取并顯示當(dāng)前內(nèi)存使用量的方法
這篇文章主要介紹了Android編程實(shí)現(xiàn)懸浮窗獲取并顯示當(dāng)前內(nèi)存使用量的方法,涉及Android針對(duì)窗口及內(nèi)存的相關(guān)操作技巧,需要的朋友可以參考下2017-07-07
Android開發(fā)筆記之:一分鐘學(xué)會(huì)使用Logcat調(diào)試程序的詳解
本篇文章是對(duì)Android中Logcat調(diào)試程序的使用進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-05-05
Android自定義控件之圓形進(jìn)度條動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了Android自定義控件之圓形進(jìn)度條動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
android實(shí)現(xiàn)桌面移動(dòng)懸浮窗口
這篇文章主要為大家詳細(xì)介紹了android實(shí)現(xiàn)桌面移動(dòng)懸浮窗口，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
Kotlin語(yǔ)言中CompileSdkVersion與targetSdkVersion的區(qū)別淺析
這篇文章主要介紹了Kotlin語(yǔ)言中CompileSdkVersion和targetSdkVersion有什么區(qū)別，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-02-02
android教程之使用popupwindow創(chuàng)建菜單示例
這篇文章主要介紹了android使用popupwindow創(chuàng)建菜單的示例,需要的朋友可以參考下2014-02-02
這篇文章主要為大家詳細(xì)介紹了Android基于百度語(yǔ)音的語(yǔ)音交互功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
Android 布局中的android:onClick的使用方法總結(jié)
這篇文章主要介紹了Android 布局中的android:onClick的使用方法總結(jié)的相關(guān)資料,設(shè)置點(diǎn)擊時(shí)從上下文中調(diào)用指定的方法，這里提供實(shí)例幫助大家理解這部分內(nèi)容，需要的朋友可以參考下2017-08-08
Android解析json數(shù)據(jù)示例代碼(三種方式)
本篇文章主要介紹了Android解析json數(shù)據(jù)示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03