小程序显示隐藏切换

按钮控制点击显示隐藏

WXML

先自定义一个变量来控制容器里的内容显示隐藏，按钮文字也随着改变
<view> 
         <button bindtap="onChangeShowState">{{showView?'Click To Check IdleReason':'Click To Check MTStatus'}}</button> 
</view> 

要显示的内容:

<view class="{{showView?'bright789_view_show':'bright789_view_hide'}}"> 
 显示的内容
</view> 

WXSS

.bright789_view_hide{ 
 display: none; 
} 
.bright789_view_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) 
  }) 
 }, 
}) 

checkbox控制显示隐藏

WXML

<checkbox name="chose" value='预约预订' bindtap="onChangeShowState"><text>预约预订</text></checkbox>

<view class="{{showView?'view_show':'view_hide'}}">
     我出现了
</view>

WXSS

.view_hide{ 
 display: block; 
} 
.view_show{ 
 display: none; 
} 

js

data: { 
  showView: true
 }, 
onLoad:function(options){
    showView: (options.showView == "true" ? true : false)
  }, 
  onChangeShowState: function(){
    var that = this;
    that.setData({
      showView: (!that.data.showView)
    })
  }