微信小程序點擊實現隱藏和點擊實現顯示

• 組件顯示的方法：即是定義組件的表現形式

  display: none;

wxml文件：

 <view >
  <button  class="hide{{showView?'show':''}}" bindtap="onChangeShowState">{{showView?'隱藏':'顯示'}}</button>
  //？:即表示了一種選擇關系
  <button class="hide{{showView?'':'show'}}" bindtap="onChangeShowState">{{showView?'隱藏':'顯示'}}</button>
 </view>
 <view class="hide{{showView?'show':''}}">
 <text class="text">我是被顯示被隱藏控件</text>
 </view>

wxss文件

.hide{
 display: none;
}
.show{ 
 display: block;
}

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

注意理解其中的選擇關系，我這里有兩個botton組件，但是顯示的時候實際可以看到的只有一個
因為當點擊的時候，另一個組件被隱藏了，也就是display方式改變了，在這個地方也就可以理解
為有一個循環關系，也就是上一個組件被后面的組件覆蓋了
也就實現了用戶的一種交互操作

參考

(4條消息) 微信小程序點擊實現隱藏和點擊實現顯示_zero_1996的博客-CSDN博客_微信小程序點擊顯示隱藏