微信小程序動(dòng)態(tài)的顯示或隱藏控件的方法(兩種方法)
在微信小程序開發(fā)時(shí),經(jīng)常要用到一個(gè)控件會(huì)根據(jù)不同的情況和環(huán)境動(dòng)態(tà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重疊上去,注意這里是重疊,所以順序不能反過來像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)聽頁面加載 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 Activity與Fragment之間的跳轉(zhuǎn)實(shí)例詳解
這篇文章主要介紹了Android Activity與Fragment之間的跳轉(zhuǎn)實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-02-02Python基礎(chǔ)教程學(xué)習(xí)筆記 第一章 基礎(chǔ)知識(shí)
這篇文章主要介紹了Python基礎(chǔ)教程學(xué)習(xí)筆記 第一章 基礎(chǔ)知識(shí) ,需要的朋友可以參考下2015-03-03Android開發(fā)實(shí)現(xiàn)的圖片點(diǎn)擊切換功能示例
這篇文章主要介紹了Android開發(fā)實(shí)現(xiàn)的圖片點(diǎn)擊切換功能,涉及Android ImageView組件創(chuàng)建、布局及實(shí)現(xiàn)圖形切換相關(guān)操作技巧,需要的朋友可以參考下2019-04-04Android ListView與RecycleView的對(duì)比使用解析
這篇文章主要介紹了Android ListView與RecycleView的對(duì)比使用解析,需要的朋友可以參考下2017-12-12Android編程之菜單Menu的創(chuàng)建方法示例
這篇文章主要介紹了Android編程之菜單Menu的創(chuàng)建方法,結(jié)合實(shí)例形式分析了Android菜單Menu的布局、響應(yīng)及功能實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-08-08Android 開發(fā)程序鎖應(yīng)用簡單實(shí)例
這篇文章主要介紹了Android 開發(fā)程序鎖應(yīng)用簡單實(shí)例的相關(guān)資料,需要的朋友可以參考下2016-10-10Android?NDK開發(fā)(C語言--聯(lián)合體與枚舉)
這篇文章主要介紹了Android?NDK開發(fā)C語言聯(lián)合體與枚舉,共用體是一種特殊的數(shù)據(jù)類型,允許您在相同的內(nèi)存位置存儲(chǔ)不同的數(shù)據(jù)類型。您可以定義一個(gè)帶有多成員的共用體,但是任何時(shí)候只能有一個(gè)成員帶有值。下面詳細(xì)介紹該內(nèi)容,需要的朋友可以參考一下2021-12-12解決ViewPager和SlidingPaneLayout的滑動(dòng)事件沖突問題
下面小編就為大家分享一篇解決ViewPager和SlidingPaneLayout的滑動(dòng)事件沖突問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01