微信小程序点击实现隐藏和点击实现显示_小程序点击显示隐藏层

• 组件显示的方法：即是定义组件的表现形式

display: none;
1

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>
1
2
3
4
5
6
7
8

wxss文件

.hide{
 display: none;
}
.show{ 
 display: block;
}
1
2
3
4
5
6

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)
    })
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

注意理解其中的选择关系，我这里有两个botton组件，但是显示的时候实际可以看到的只有一个
因为当点击的时候，另一个组件被隐藏了，也就是display方式改变了，在这个地方也就可以理解
为有一个循环关系，也就是上一个组件被后面的组件覆盖了
也就实现了用户的一种交互操作