小程序view的显示与隐藏

需要在全局数据块中，设定一个控制键。

?

1 2 3 4

data: {   ......//省略其他代码    showView: true  },

然后是在wxml中，view的class中设置2个class，并用三目表达式来进行设定class。代码如下：

?

1 2 3

<view class="{{showView?'header_view_show':'header_view_hide'}}"> ...... </view>

在wcss中进行这两个class的设定，代码如下：

?

1 2 3 4 5 6 7 8

.header_view_hide{   display: none; }   .header_view_show{     ......   display: block; }

在JS代码中，放入一个事件来修改showView的值：

?

1 2 3 4 5

onChangeShowState: function () {     this.setData({       showView: (!this.data.showView)     })   },

?

1	<button bindtap="onChangeShowState">显示/隐藏view</button>