小程序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 ...
随机推荐
- 14Flask重要知识
一,李辉<Flask Web开发实战> 1,内网穿透 内网穿透工具可以快速让flask项目运行: 1,https://localtunnel.github.io/www/ 2,https: ...
- W3C中不同标准的含义
学习CSS/HTML的过程中,当出现释义冲突时,W3C(万维网联盟)官网所陈列的技术标准是最核心的判断参考.但是新手在查阅W3C标准索引页面时,会发现同一个属性或者模型会出现多个不同的阶段规范展示结果 ...
- 认识Redis集群——Redis Cluster
前言 Redis集群分三种模式:主从模式.sentinel模式.Redis Cluster.之前没有好好的全面理解Redis集群,特别是Redis Cluster,以为这就是redis集群的英文表达啊 ...
- 菜鸟试做GUI简单数据库查询界面 python+tkinter+mysql
一.准备工作: 1.安装mysql3.7,创建一个test数据库,创建student表,创建列:(列名看代码),创建几条数据 (以上工作直接用navicat for mysql工具完成) 二.代码: ...
- Python_面试题汇总【正在整理中...】
1.十大算法 阶乘 冒泡 1 #使用递归实现阶乘 2 3 def f(n): 4 if n ==1: 5 return 1 6 else: 7 return n*(f(n-1)) 使用递归实现阶乘 1 ...
- SQL Server DATEDIFF() 函数用法
定义和用法 DATEDIFF() 函数返回两个日期之间的时间,例如计算年龄大小. DATEDIFF(datepart,startdate,enddate)startdate 和 enddate 参数是 ...
- ISITDTU CTF 2020 部分Web题目Writeup
周末,跟着m3w师傅打ISITDTUCTF,m3w师傅带弟弟上分,Tql! Web1 给了源码: <?php class Read{ public $flag; public function ...
- 漏洞利用-FTP漏洞利用
一.环境说明 目标IP: 本人虚拟机 192.168.80.134 ,使用 metasploit2 攻击IP: 本人虚拟机 192.168.80.129 ,使用 kali 二.匿名用户登录 root@ ...
- 思维导图VS金字塔原理
作为常识,思维导图制作的核心元素是关键词,而金字塔原理制作的核心元素则是拓展的概要句子,这两种方式是当今人们常用的思维工具,本文对其做了对比,希望对你的选择有所帮助. 金字塔原理结构:从上到下三角形结 ...
- windows安装redis扩展
Thread Safety enabled 打开phpinfo() 看php版本是ts还是nts, 如上是ts版本的,所以需要安装redis的ts版本, redis的扩展下载地址 https://p ...