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

目录

一、效果图：

二、代码

js：

wxml：

---

一、效果图：

二、代码

js：

1.  
   Page({
2.  
   data:{
3.  
   hidden:false,
4.  
   },
5.  
   // 隐藏
6.  
   yincang:function(e){
7.  
   setTimeout(function () {
8.  
   this.setData({
9.  
   hidden: true
10.  
    })
11.  
    }.bind(this), )
12.  
    },
13.  
    // 显示
14.  
    xianshi:function(e){
15.  
    setTimeout(function () {
16.  
    this.setData({
17.  
    hidden: false
18.  
    })
19.  
    }.bind(this), )
20.  
    },
21.  
     
22.  
    })

wxml：

1.  
   <view style="text-align: center;">
2.  
   <view hidden='{{hidden}}' >
3.  
   <image mode='widthFix' src='https://gd-hbimg.huaban.com/f3b0ddffcf31f47a4bb6ed1cca127b4665a30a2f35598-fR8uq4'></image>
4.  
   <button style="margin-top: 25rpx;" type="warn" bindtap='yincang'>隐藏</button>
5.  
   </view>
6.  
    
7.  
   <view wx:if="{{hidden}}">
8.  
   <!-- <image mode='widthFix' src='https://gd-hbimg.huaban.com/8de549e728eff85248a619a845bc00409f277adf18b8d-zALOF3'></image> -->
9.  
   <button style="margin-top: 25rpx;" wx:if="{{hidden}}" type="primary" bindtap='xianshi'>显示</button>
10.  
    </view>
11.  
    </view>

这篇好文章是转载于：学新通技术网