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

 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. javascript函数式编程基础随笔

    JavaScript 作为一种典型的多范式编程语言,这两年随着React\vue的火热,函数式编程的概念也开始流行起来,lodashJS.folktale等多种开源库都使用了函数式的特性. 一.认识函 ...

  2. epoll源码解析翻译------说使用了mmap的都是骗子

    本文地址 //https://www.cnblogs.com/l2017/p/10830391.html //https://blog.csdn.net/li_haoren select poll e ...

  3. fcntl函数用法——复制文件描述符

    文件描述符复制和输出重定向dup() 用最小的文件描述符来复制,从0开始搜素.复制文件描述符后,最小文件描述符指向被复制描述符指向的文件.dup2(int oldfd,int newfd) 强制用ne ...

  4. binary hacks读数笔记(ld 链接讲解 二)

    这块将介绍一下ld链接命令的具体使用.ld的作用:ld是GNU binutils工具集中的一个,是众多Linkers(链接器)的一种.完成的功能自然也就是链接器的基本功能:把各种目标文件和库文件链接起 ...

  5. tensorflow的tfrecord操作代码与数据协议规范

    tensorflow的数据集可以说是非常重要的部分,我认为人工智能就是数据加算法,数据没处理好哪来的算法? 对此tensorflow有一个专门管理数据集的方式tfrecord·在训练数据时提取图片与标 ...

  6. FLEX弹性布局小结

    1. 弹性盒子中: flex: 0 1 auto表示什么意思 flex默认三个参数是flex-grow, flex-shrink, flex-basis,默认值是0 1 auto. flex-grow ...

  7. 网络协议_7层_TCP/IP

  8. Nginx实例

    一.反向代理 反向代理实例一 1.实现效果 打开浏览器,在浏览器地址栏输入地址www.pluto.com,跳转到 liunx 系统 tomcat 主页面中 2.准备工作 [1].安装tomcat [r ...

  9. [原题复现+审计][SUCTF 2019] WEB CheckIn(上传绕过、.user.ini)

    简介  原题复现:https://github.com/team-su/SUCTF-2019/tree/master/Web/checkIn  考察知识点:上传绕过..user.ini  线上平台:h ...

  10. Spring Cloud实战 | 第九篇:Spring Cloud整合Spring Security OAuth2认证服务器统一认证自定义异常处理

    本文完整代码下载点击 一. 前言 相信了解过我或者看过我之前的系列文章应该多少知道点我写这些文章包括创建 有来商城youlai-mall 这个项目的目的,想给那些真的想提升自己或者迷茫的人(包括自己- ...