Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> 微信小程序動態的顯示或隱藏控件的方法(兩種方法)

微信小程序動態的顯示或隱藏控件的方法(兩種方法)

編輯:關於Android編程

在微信小程序開發時,經常要用到一個控件會根據不同的情況和環境動態顯示與隱藏這種情況,下面就來實踐一把!上效果先

它的實現方法有兩種,

第一種方法:單選法,就是隱藏與顯示根據條件二選一,代碼如下:

<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;
}

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved