微信小程序学习——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
推荐阅读
-
微信小程序canvas.drawImage完全显示图片问题的解决
-
前端笔记之微信小程序(一)初识微信小程序&WXSS与CSS|WXML与HTML的差异&像素和DPR
-
微信小程序bindinput与bindsubmit的区别实例分析
-
微信小程序中多个页面传参通信的学习与实践
-
详解微信小程序之scroll-view的flex布局问题
-
微信小程序 image组件binderror使用例子与js中的onerror区别
-
详解微信小程序 通过控制CSS实现view隐藏与显示
-
微信小程序 image组件binderror使用例子与js中的onerror区别
-
微信小程序实现用table显示数据库反馈的多条数据功能示例
-
微信小程序学习笔记之登录API与获取用户信息操作图文详解