小程序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>
小程序view的显示与隐藏的更多相关文章
- 微信小程序 View:flex 布局
微信小程序 View 支持两种布局方式:Block 和 Flex 所有 View 默认都是 block 要使用 flex 布局的话需要显式的声明: display:flex; 下面就来介绍下微信小程序 ...
- swift 如何控制view的显示与隐藏
swift 如何控制view的显示与隐藏 UIView有一个属性 hidden let line: UILabel = UILabel() 默认是显示的 需要显示它的时候:line.hidden = ...
- 微信小程序文字超过行后隐藏并且显示省略号
在小程序开发过程中,经常会遇到一些数据无法在text中完全展示,所以会使用到隐藏相关文字,并在后方加上省略号(...). 只需要在对应的text中设置下面的css就可以了. overflow:hidd ...
- 小程序开发-小程序tabBar不显示的原因分析
在尝试小程序开发时,tabBar这个是个非常常见的组件,但是今天在进行开发时,设置了TabBarb并没有显示,被这个问题困扰了近半小时,现在将排查问题后所得到的经验记录下来. 首先 如果tabBar不 ...
- 微信小程序view不能换行 text实现转义换行符
在html中可以直接使用<br />换行,但是小程序wxml中使用<br />无效,可以换成\n Page({ data: { title: '至少5个字\n请多说些感受吧' ...
- 微信小程序tabBar 不显示底部菜单的原因和解决方法
1,书写,正确书写时tabBar,不要写成tabbar!!! 2,当创建新工程时,app.json中Pages配置是这样的 ,,[图1], 注意:微信小程序里面的json文件时不能注释的,图中只是给读 ...
- 第十篇、微信小程序-view组件
视图容器 常用的样式的属性: 详情:http://www.jianshu.com/p/f82262002f8a display :显示的模式.可选项有:flex(代表view可以伸缩,弹性布局)- f ...
- 微信小程序左滑显示按钮demo
wxml结构(删除部分代码): <view class="chapter-item" wx:for="{{klgData}}" data-index=&q ...
- 微信小程序view标签以及display:flex的测试
一:testview.wxml,testview.js自动生成示例代码 //testview.wxml <view class="section"> <view ...
随机推荐
- 索引--mysql 数据库Load data大量数据时性能因素之一
发现load data infile 插入数据时越来越慢,后来发现是因为创建表时有创建索引的动作. 把索引创建删除掉之后,导入很迅速,导入后再创建索引,效率果有提高.
- Goldstone's theorem(转载)
Goldstone's theorem是凝聚态物理中的重要定理之一.简单来说,定理指出:每个自发对称破缺都对应一个无质量的玻色子(准粒子),或者说一个zero mode. 看过文章后,我个人理解这其实 ...
- 自定义圆角背景的textview,抛弃shape
自定义一个圆角背景的TextView,解放双手,不用再写shape了. 1.values目录新建attrs.xml. <?xml version="1.0" encoding ...
- 同步FIFO学习笔记
- nacos服务注册源码解析
1.客户端使用 compile 'com.alibaba.cloud:spring-cloud-starter-alibaba-nacos-discovery:2.2.3.RELEASE' compi ...
- Java中常量池详解
在Java的内存分配中,总共3种常量池: 转发链接:https://blog.csdn.net/zm13007310400/article/details/77534349 1.字符串常量池(Stri ...
- 在 macOS 中使用 Podman
原文链接:https://fuckcloudnative.io/posts/use-podman-in-macos/ Podman 是一个无守护程序与 Docker 命令兼容的下一代 Linux 容器 ...
- Math对象-JavaScript
Math 是一个内置对象,它拥有一些数学常数属性和数学函数方法.Math 不是一个函数对象. Math 用于 Number 类型. Math 的所有属性与方法都是静态的. 属性 Math.E 欧拉常数 ...
- Spring中各个模块
Spring中个模块介绍 核心模块 提供了对Bean的配置.管理.创建等以及IOC/DI.如果只需要提供IOC/DI功能,只需要引入Beans和Core两个jar包 Core 包含Spring框架 ...
- Shamir秘密共享方案 (Python)
Shamir's Secret Sharing scheme is an important cryptographic algorithm that allows private informati ...