欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

微信小程序学习——view的显示与隐藏

程序员文章站 2022-05-05 19:10:01
...

微信小程序学习——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>

参考博客https://blog.csdn.net/bright789/article/details/54728326

相关标签: 微信小程序学习