小程序的显示与隐藏

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)

    })

  }

})

 

Wxml文件代码:

<viewclass="page">

  <view >

     <buttonbindtap="onChangeShowState">{{showView?'隐藏':'显示'}}</button>

  </view>

  <view class="bright789_view_hide{{showView?'bright789_view_show':''}}">

    <textclass="bright789-text">我是被显示被隐藏控件</text>

  </view>

</view>

 

Wxss文件代码:

.bright789-text{

  font-size: 40rpx;

  line-height: 40px;

  color: #ff0000;

}

.bright789_view_hide{

    display: none;

}

.bright789_view_show{

    display: block;

}



猜你喜欢

转载自blog.csdn.net/qq_38674970/article/details/79937244