微信小程序通过点击按钮控制元素隐藏与显示

目录

一、效果图：

二、代码

js：

wxml：

---

一、效果图：

二、代码

js：

Page({
  data:{
    hidden:false,
},
// 隐藏
  yincang:function(e){
    setTimeout(function () {
      this.setData({
        hidden: true
      })
    }.bind(this), )
  },
  // 显示
  xianshi:function(e){
    setTimeout(function () {
      this.setData({
        hidden: false
      })
    }.bind(this), )
  },

})

wxml：

<view style="text-align: center;">
  <view hidden='{{hidden}}' >
    <image mode='widthFix' src='https://gd-hbimg.huaban.com/f3b0ddffcf31f47a4bb6ed1cca127b4665a30a2f35598-fR8uq4'></image>
    <button style="margin-top: 25rpx;" type="warn" bindtap='yincang'>隐藏</button>
  </view>

  <view wx:if="{{hidden}}">
  <!-- <image mode='widthFix' src='https://gd-hbimg.huaban.com/8de549e728eff85248a619a845bc00409f277adf18b8d-zALOF3'></image> -->
   <button style="margin-top: 25rpx;" wx:if="{{hidden}}" type="primary" bindtap='xianshi'>显示</button>
  </view>
</view>