小程序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 ...
随机推荐
- JS超酷时钟的制作
通过补充代码,实现时钟实时显示当前时间:年.月.日.时.分.秒.日期. <!DOCTYPE html> <html> <head lang="zh-CN&quo ...
- Go语言配置管理神器——Viper中文教程
Viper是适用于Go应用程序的完整配置解决方案.它被设计用于在应用程序中工作,并且可以处理所有类型的配置需求和格式. Viper Viper是适用于Go应用程序的完整配置解决方案.它被设计用于在应用 ...
- Vue 组件化开发
组件化开发 基本概念 在最开始的时候,已经大概的聊了聊Vue是单页面开发,用户总是在一个页面上进行操作,看到的不同内容也是由不同组件构成的. 通过用户的操作,Vue将会向用户展示某些组件,也会隐藏某些 ...
- Windows10系统下使用Docker搭建ClickHouse开发环境
前提 随着现在业务开展,几个业务系统的数据量开始急剧膨胀.之前使用了关系型数据库MySQL进行了一次数据仓库的建模,发现了数据量上来后,大量的JOIN操作在提高了云MySQL的配置后依然有点吃不消,加 ...
- c++11-17 模板核心知识(八)—— enable_if<>与SFINAE
引子 使用enable_if<>禁用模板 enable_if<>实例 使用Concepts简化enable_if<> SFINAE (Substitution Fa ...
- windows下mysql的远程访问和权限设置
如果想要用户root可以远程登录,则可通过修改user表中root用户对应的host字段值为"%"即可.我们用以下语句进行修改: update user set host = '% ...
- Stream初步认识(一)
Stream初步认识(一)测试 简介 Stream 是 Java8 中处理集合的关键抽象概念,它可以指定你希望对 集合进行的操作,可以执行非常复杂的查找.过滤和映射数据等操作. 使用Stream AP ...
- 对于AQS的理解
1.JUC包中的 CountDownLatch.CyclicBarrier.ReentrantLock和Semaphore都是基于AQS(AbstractQuenedSynchronizer)实现的 ...
- 基于Vue、Springboot网站实现第三方登录之QQ登录,以及邮件发送
基于Vue.Springboot实现第三方登录之QQ登录 前言 一.前提(准备) 二.QQ登录实现 1.前端 2.后端 1.application.yml 和工具类QQHttpClient 2.QQL ...
- Python正则表达式大全
前言 正则表达式是对字符串(包括普通字符(例如,a 到 z 之间的字母)和特殊字符(称为"元字符"))操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成 ...