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

 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>

  

小程序view的显示与隐藏的更多相关文章

  1. 微信小程序 View:flex 布局

    微信小程序 View 支持两种布局方式:Block 和 Flex 所有 View 默认都是 block 要使用 flex 布局的话需要显式的声明: display:flex; 下面就来介绍下微信小程序 ...

  2. swift 如何控制view的显示与隐藏

    swift 如何控制view的显示与隐藏 UIView有一个属性 hidden let line: UILabel = UILabel() 默认是显示的 需要显示它的时候:line.hidden = ...

  3. 微信小程序文字超过行后隐藏并且显示省略号

    在小程序开发过程中,经常会遇到一些数据无法在text中完全展示,所以会使用到隐藏相关文字,并在后方加上省略号(...). 只需要在对应的text中设置下面的css就可以了. overflow:hidd ...

  4. 小程序开发-小程序tabBar不显示的原因分析

    在尝试小程序开发时,tabBar这个是个非常常见的组件,但是今天在进行开发时,设置了TabBarb并没有显示,被这个问题困扰了近半小时,现在将排查问题后所得到的经验记录下来. 首先 如果tabBar不 ...

  5. 微信小程序view不能换行 text实现转义换行符

    在html中可以直接使用<br />换行,但是小程序wxml中使用<br />无效,可以换成\n Page({ data: { title: '至少5个字\n请多说些感受吧' ...

  6. 微信小程序tabBar 不显示底部菜单的原因和解决方法

    1,书写,正确书写时tabBar,不要写成tabbar!!! 2,当创建新工程时,app.json中Pages配置是这样的 ,,[图1], 注意:微信小程序里面的json文件时不能注释的,图中只是给读 ...

  7. 第十篇、微信小程序-view组件

    视图容器 常用的样式的属性: 详情:http://www.jianshu.com/p/f82262002f8a display :显示的模式.可选项有:flex(代表view可以伸缩,弹性布局)- f ...

  8. 微信小程序左滑显示按钮demo

    wxml结构(删除部分代码): <view class="chapter-item" wx:for="{{klgData}}" data-index=&q ...

  9. 微信小程序view标签以及display:flex的测试

    一:testview.wxml,testview.js自动生成示例代码 //testview.wxml <view class="section"> <view ...

随机推荐

  1. tp6.0.x 反序列化漏洞

    tp6 反序列化漏洞复现 环境 tp6.0 apache php7.3 漏洞分析 反序列化漏洞需要存在 unserialize() 作为触发条件,修改入口文件 app/controller/Index ...

  2. close wait 状态的随想

    今天在新入职的公司处理waf 的问题时,突然看到了一个tcp状态close-wait 想一想 close-wait 是怎样产生的???? 被动收到FIN 关闭请求,协议栈主动发出ACK, 等待 本端主 ...

  3. 自适应哈希索引(Adaptive Hash Index, AHI) 转

    Adaptive Hash Index, AHI 场景 比如我们每次从辅助索引查询到对应记录的主键,然后还要用主键作为search key去搜索主键B+tree才能找到记录. 当这种搜索变多了,inn ...

  4. Ceph编译加速的小技巧

    总结了几个小技巧,用于在ceph编译过程中,能够更快一点 修改clone的地址 git clone https://github.com/ceph/ceph.git 可以修改成 git clone g ...

  5. spring boot和spring cloud版本选择

    SpringBoot版本介绍 官网链接:https://spring.io/projects/spring-boot#learn Spring Boot的版本以数字表示.例如:Spring Boot ...

  6. Javaweb项目页面实时显示后台处理结果

    http://www.cnblogs.com/dong-xu/p/6701271.html 此博文甚好,项目参照博主代码可实现. 前端页面: <%@ page language="ja ...

  7. 从 Webpack 到 Snowpack, 编译速度提升十倍以上——TRPG Engine迁移小记

    动机 TRPG Engine经过长久以来的迭代,项目已经显得非常臃肿了.数分钟的全量编译, 每次按下保存都会触发一次10s到1m不等的增量编译让我苦不堪言, 庞大的依赖使其每一次编译都会涉及很多文件和 ...

  8. 思维导图软件iMindMap:生活工作的好帮手

    思维导图iMindMap这样的好帮手在生活工作中能帮你打破困境,,至于它有哪些力所能及的事情就是下面小编要跟你讲的: 你是否经常遇到过这样的情况: 作为学生,你觉得学习紧张,虽然三更眠五更起,还是成绩 ...

  9. SRX_Test_2_sound

    声音(sound) [问题描述] 雅礼中学的校门口在修建地铁,而由此带来的噪音问题让周边的居民困扰不已.环保局正在研究 一项评估模型,可以定量评价噪音的危害程度.这项评估模型是这样的:将每一条街道视作 ...

  10. Java基础教程——网络基础知识

    参考阅读[中国互联网发展史]:https://zhuanlan.zhihu.com/p/61602252 协议 计算机网络中的通信必须有一些约定,这些约定称为"通信协议". 通信协 ...