微信小程序動態(tài)的顯示或隱藏控件，帶參傳遞的界面跳轉(zhuǎn)的兩種方式 ...
發(fā)布時間：2018-02-06 16:05 所屬欄目：小程序開發(fā)教程
一：動態(tài)的顯示或隱藏控件
在微信小程序開發(fā)時，經(jīng)常要用到一個控件會根據(jù)不同的情況和環(huán)境動態(tài)顯示與隱藏這種情況，下面就來實踐一把！上效果先
它的實現(xiàn)方法有兩種：
第一種方法：單選法，就是隱藏與顯示根據(jù)條件二選一，代碼如下:
<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>
|
這種辦法一開始看有點頭暈，所以把它分解成兩個狀態(tài)：
顯示狀態(tài):
因為showView是true，所以我們把它轉(zhuǎn)成如下樣子
<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 '}}這種是不行的
隱藏狀態(tài):
相當(dāng)于如下代碼:
<ol><li> <view class="bright789_view_hide }"> <text class="bright789-text">我是被顯示被隱藏控件</text> </view> </li></ol> |
最后我把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)
})
}
})
|
