小程序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 ...
随机推荐
- Java的内存区域划分
内存分区简介 老生常谈的问题了,虽然网上一搜一大把,也很详细,但是我还是想写一写,通过自己的总结整理,加深一下印象. 我不知道学习Java内存分区有什么实际作用,但它就是像常识一样,一个使用Java语 ...
- 详解如何在RVIZ中用Marker显示机器人运动路径
写在前面 最近有道作业题需要将机器人的历史路径显示出来,但是网上很多相关的教程都是搬运了官网的链接,并没有详细的操作流程...因此我又花费了很多时间去ros官网上学习marker的用法,学习怎么写pu ...
- 写博客真的很枯燥,更麻烦的是我还不会MD,排版太不友好了啊。
学习MD 第一标题 #一号标题 ##二号标题 神马啊,博客园居然不支持MD语法
- Martini初步
部分内容来自http://jerkwin.github.io/9999/08/01/Martini%E7%B2%97%E7%B2%92%E5%8C%96%E5%8A%9B%E5%9C%BA%E4%BD ...
- 二:Tomcat与登录
在使用Tomcat部署服务器之前我们需要写一个页面登录的HTML文本 该文本如下 <!DOCTYPE html> <html> <head> <meta ch ...
- maven 笔记2
maven 中央工厂的位置:D:\dubbo\apache-maven-3.2.5\lib D:\dubbo\apache-maven-3.2.5\lib pom-4.0.0.xml reposito ...
- 解决IE下readonly的Input光标选中的问题
首先用unselectable="on"解决,但是这种方法bug太多, 屏蔽了input的onblur事件(也就是focus事件在Angualr下),所以只能用click事件来代替 ...
- C# 9.0新特性详解系列之二:扩展方法GetEnumerator支持foreach循环
1.介绍 我们知道,我们要使一个类型支持foreach循环,就需要这个类型满足下面条件之一: 该类型实例如果实现了下列接口中的其中之一: System.Collections.IEnumerable ...
- Camtasia如何给视频添加测试题
Camtasia是一款专门录制屏幕动作的工具,除此之外,它还具有即时播放和编 辑压缩的功能,可对视频片段进行剪接.添加转场效果.给视频添加测试题自然也不在话下了. 今天笔者就向大家展示一下如何使用Ca ...
- Camtasia中对录制视频进行编辑——行为
小视频的逐渐兴起,让我们的生活变得多姿多彩,同时,也造就了一批新媒体的创业者还有越来越多的网红,这不禁使我们也想加入他们的行列.但是问题来了,拍摄视频后最重要的是对视频进行剪辑,没有一款经济适用的软件 ...