微信小程序学习——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>

参考博客：https://blog.csdn.net/bright789/article/details/54728326

微信小程序学习——view的显示与隐藏相关推荐

微信小程序-控制文本的显示及隐藏（当文字超出两行时，设置为可点击并进入查看详情页面）
参考文章 1.微信小程序文本展开.收起功能 2.微信小程序文字超过行后隐藏并且显示省略号需求描述显示消息内容,超出两行部分隐藏.当有隐藏内容时,该卡片设为可点击,进入消息详情页面. 代码 1.wx ...
微信小程序学习笔记（1）
微信小程序学习笔记 1.小程序代码结构 2.逻辑层和视图层 3. 小程序的宿主环境(通信模型.运行机制.组件.API) 4. 数据绑定和事件绑定 1.小程序代码结构当开发者新建一个工程时,项目文件包 ...
微信小程序学习（1）-基础开发
学习微信小程序微信小程序学习(1) 微信小程序学习(2) 文章目录学习微信小程序注册和初始化小程序配置 tabbar导航栏模板插样与WXML 循环渲染条件渲染模板微信小程序脚本WXS ...
微信小程序学习9：获取用户信息进行登录操作 wx.getUserProfile
微信小程序学习9:获取用户信息进行登录操作wx.getUserProfile 2021年4月份左右微信对获取用户的API进行了更改.使用wx.getUserInfo只能获取用户的匿名信息. 要获取用户 ...
微信小程序学习（加深）
微信小程序学习(加深) 一.wx:if 与 hidden 的对比 wx:if 以动态创建和移除元素的方式,控制元素的展示与隐藏 hidden 以切换样式的方式(display: none/block; ...
微信小程序学习（三）：在微信开发者工具中，使用WeUI前端美化框架，微信小程序
微信小程序学习(三):在微信开发者工具中,使用WeUI 这里就是将WeUI导入到微信开发者工具中,我并没有使用多少样式,这里只是展示了一下怎么引用网上有很多的方法,我绝大多数都没看懂,这里就是最简单 ...
微信小程序学习笔记一 + 小程序介绍前置知识
微信小程序学习笔记一 1. 什么是小程序? 2017年度百度百科十大热词之一微信小程序, 简称小程序, 英文名 Mini Program, 是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是 ...
微信小程序学习：（二）app.js及index.js详解
微信小程序学习:(二)app.js及index.js详解项目地址:https://github.com/leoricding/- 在用ide创建小程序项目时,系统默认为我们创建了一个hellowor ...
微信小程序学习之路（一）
微信小程序学习之路(一) 1.前言 2.准备工作 (1).IDE的选择 (2).微信小程序的文件说明 (3)开发者用户注册 3.编写 (1).新建项目 (2).代码的编写 3.代码的发布以及审核 1. ...

微信小程序学习——view的显示与隐藏

微信小程序学习——view的显示与隐藏相关推荐

最新文章

热门文章