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

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

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方式改变了，在这个地方也就可以理解 
为有一个循环关系，也就是上一个组件被后面的组件覆盖了 
也就实现了用户的一种交互操作