小程序view的显示与隐藏
需要在全局数据块中,设定一个控制键。
data: { ......//省略其他代码 showView: true },
然后是在wxml中,view的class中设置2个class,并用三目表达式来进行设定class。代码如下:
<view class="{{showView?'header_view_show':'header_view_hide'}}"> ...... </view>
在wcss中进行这两个class的设定,代码如下:
.header_view_hide{ display: none; } .header_view_show{ ...... display: block; }
在JS代码中,放入一个事件来修改showView的值:
onChangeShowState: function () { this.setData({ showView: (!this.data.showView) }) },
<button bindtap="onChangeShowState">显示/隐藏view</button>