小程序 顯示隱藏

剛剛開始接觸小程序，發現是跟vue差不多的寫法。但是又比vue少了很多功能，很不習慣

然后想做個顯示隱藏的功能，找了網上大多數人都是：

建兩個類：

vshow:{ display : block }
vhidden:{ display : none }

然后在wxml中是：

<view class="{{ showView ? vshow : vihdden }}">
    顯示隱藏的元素、上面class中是三元表達式
</view>
<view bindtap="show">點擊我切換效果</view>

js中：

data:{
    showView:false //通過true 和 false 來切換類，達到顯示隱藏的效果
}    
show:function(){
　　this.setData({
     　showView:!this.data.showView
　　})
}

 看了很多文章都是這樣子做。當然還有別的更簡單的做法。

使用  wx:if  跟  hidden

wx:if:

wxml:

<view wx:if="{{showView}}">
    顯示隱藏的元素
</view>
<view bindtap="show">點擊我切換效果</view>

js中:

data:{
    showView:false //通過true 和 false 來控制顯示隱藏
}    
show:function(){
　　this.setData({
     　showView:!this.data.showView
　　})
}

代碼差不多。但是看起來就簡潔了不少。

hidden:跟 wx:if 其實是差不多的。只是、hidden為true的時候進行隱藏。不然就是顯示。所以改一下showView的初始值就可以了

區別：

wx:if : 隱藏的時候不渲染。顯示的時候才會。不頻繁切換用這個。

hidden:顯示隱藏都會渲染。如果是切換頻繁的話，用這個

 

ps:小程序單向流數據。點擊之后發生的事件切換什么的都需要用setData({})來修改。不然不會產生效果

bindtap