小程序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 ...
随机推荐
- IP 层收发报文简要剖析5--ip报文发送2
udp 发送ip段报文接口ip_append_data ip_append_data 函数主要用来udp 套接字以及raw套接字发送报文的接口.在tcp中发送ack 以及rest段的ip_send_u ...
- 451. Sort Characters By Frequency(桶排序)
Given a string, sort it in decreasing order based on the frequency of characters. Example 1: Input: ...
- kafka消费者offset存储策略
由于 consumer 在消费过程中可能会出现断电宕机等故障,consumer 恢复后,需要从故 障前的位置的继续消费,所以 consumer 需要实时记录自己消费到了哪个 offset,以便故障恢 ...
- gdb调试入门(上)
一.什么是gdb:gdb是GNU debugger的缩写,是编程调试工具二.gdb功能:1.启动程序,可根据用户要求随心所欲的运行程序(比如带参数)2.可让被调试的程序在用户指定的调试的断点处停住3. ...
- create-react-app添加对TypeScript支持
背景 最近一直在重构react项目,由于项目历史原因,将之前parcel打包工具换成了webpack,并选择了使用create-react-app作为项目开发脚手架. 接着就是把项目中flow类型检查 ...
- TypeError: Cannot read property 'Component' of undefined
继续跟着阮一峰的教程走,下面写到PropTypes的getDefaultProps时,又出现了问题,基于上一个createClass的报错换成了Component写法 错误描述: 解决方法:引入rea ...
- SQL SERVER数据库内 FOR XML PATH 函数用法
把自己点点滴滴的学习记录下来!!!! 一.FOR XML PATH 简单介绍 那么还是首先来介绍一下FOR XML PATH ,假设现在有一张兴趣爱好表(TBJTXXCE)用来存放就诊患者信息,表结构 ...
- Navicat总是提示主键不存在问题
Windows 和 Linux:打开navicat > 找到工具 > 点击选项- > 外观 > 点击数据 & 网格 > 取消勾选显示主键警告 > 确定. M ...
- Beyond Compare-这款检查图片工具真的绝了!
无论是出去旅游,还是参加聚会,在朋友圈分享美美的图片,已经成为了很多都市人的日常.在分享图片前,大多数人都会选择使用滤镜.风格等功能对照片进行一定的美化.但有时候美化的程度比较轻微,连修图的人都无法判 ...
- 用OCR文字识别工具来审阅和处理PDF内容
"工作的时候要同时打开好几个软件真的是太不方便了."很多公司白领都有这样的困扰.他们抱怨着进行文字识别过后又要打开文档编辑器来进行编辑.PDF是办公文档常用的格式, ABBYY F ...