微信小程序点击实现隐藏和点击实现显示_微信小程序点击显示隐藏的-程序员宅基地

技术标签: 微信小程序  

  • 组件显示的方法:即是定义组件的表现形式
display: none;
  • 1

wxml文件:

 <view >
  <button  class="hide{
    {
    showView?'show':''}}" bindtap="onChangeShowState">{
    {
    showView?'隐藏':'显示'}}</button>
  //?:即表示了一种选择关系
  <button class="hide{
    {
    showView?'':'show'}}" bindtap="onChangeShowState">{
    {
    showView?'隐藏':'显示'}}</button>
 </view>
 <view class="hide{
    {
    showView?'show':''}}">
 <text class="text">我是被显示被隐藏控件</text>
 </view>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

wxss文件

.hide{
 display: none;
}
.show{ 
 display: block;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

js文件

Page({
  data: {
    showView: true
  },
  onLoad: function (options) {
    
    // 生命周期函数--监听页面加载
    showView: (options.showView == "true" ? true : false)
  }
  , onChangeShowState: function () {
    
    var that = this;
    that.setData({
      showView: (!that.data.showView)
    })
  }
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

注意理解其中的选择关系,我这里有两个botton组件,但是显示的时候实际可以看到的只有一个 
因为当点击的时候,另一个组件被隐藏了,也就是display方式改变了,在这个地方也就可以理解 
为有一个循环关系,也就是上一个组件被后面的组件覆盖了 
也就实现了用户的一种交互操作

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/xinzi11243094/article/details/80682981

智能推荐

HTML基础_html中表示标题1~标题6的写法,分别是-程序员宅基地

文章浏览阅读159次。1. 文本标题:【格式】:<h#><h#>,#为1~6,分别为6级标题2. 字体及字符实体语法说明<i></i> 或<em></em>倾斜标记<b></b> 或<strong></strong>加粗标记<u></u..._html中表示标题1~标题6的写法,分别是

关于vue配置代理(nginx)的一些学习记录_vue nginx-程序员宅基地

文章浏览阅读3.4k次,点赞2次,收藏2次。假设有两台主机AB,一台服务器,其中A主机代理(代替)B主机去访问服务器。_vue nginx

零基础学python_07_列表(修改、添加和删除元素)_添加一个元素"aaa" 删除最后一个元素 判断"aaa"在不在列表中 打印列表的长度 清空-程序员宅基地

文章浏览阅读198次。你创建的大多数列表都将是动态的,这意味着列表创建后,将随着程序的运行增删元素。例如,你创建一个游戏,要求玩家射杀从天而降的外星人;为此,可在开始时将一些外星人存储在列表中,然后每当有外星人被射杀时,都将其从列表中删除,而每次有新的外星人出现在屏幕上时,都将其添加到列表中。在整个游戏运行期间,外星人列表的长度将不断变化。修改列表元素修改列表元素的语法与访问列表元素的语法类似。要修改列表元素,可指..._添加一个元素"aaa" 删除最后一个元素 判断"aaa"在不在列表中 打印列表的长度 清空

吴忠强:刷LeetCode的正确姿势!-程序员宅基地

文章浏览阅读275次。↑↑↑关注后"星标"Datawhale每日干货&每月组队学习,不错过Datawhale干货作者:吴忠强,东北大学,Datawhale成员写在前面最近面试中做...

华为数通方向HCIP-DataCom H12-831题库(判断题:141-160)-程序员宅基地

文章浏览阅读364次。华为数通HCIP H12-831 判断题

2-SAT问题合集-ybtoj-程序员宅基地

文章浏览阅读1.9k次,点赞3次,收藏7次。2-SAT的合集_2-sat

随便推点

第一篇自我介绍(单片机)_单片机程序如何编写实现自我介绍的问答与展示-程序员宅基地

文章浏览阅读5.9k次,点赞26次,收藏19次。单片机是一种小型计算机,通常被用于控制和处理电子设备中的数据。单片机可以通过编程来完成各种任务,例如控制LED灯的亮度,读取温度传感器的数据等等。_单片机程序如何编写实现自我介绍的问答与展示

SQLiteC/C++接口详细介绍sqlite3_stmt类(十二)-程序员宅基地

文章浏览阅读1k次,点赞9次,收藏20次。SQLite拥有超过225个API,本系列文章将深入介绍 SQLite C/C++ 数据库接口的基础知识,包括如何连接和打开 SQLite 数据库、执行查询和事务管理、提取查询结果集等等,帮助开发者更好地了解和使用 SQLite 数据库接口。本文详细介绍库文件打开关闭接口。

新浪短网址API接口(3月15日更新)-程序员宅基地

文章浏览阅读469次。新浪旧版开发文档地址:http://open.weibo.com/wiki/Short_url/shorten新浪短网址接口的稳定性和跳转速度还是很给力的,现给出其API说明。该接口支持两种返回格

TOJ 3519.Ones and Zeros_for a certain positive integer n and a certain sys-程序员宅基地

文章浏览阅读341次。题目链接:http://acm.tju.edu.cn/toj/showp3519.html3519. Ones and ZerosTime Limit: 1.0 Seconds Memory Limit: 65536KTotal Runs: 702 Accepted Runs: 395Though numbers are create_for a certain positive integer n and a certain system p such as decimal,

卡巴斯基实验室:2020Q2 APT趋势报告_apt实验室方案-程序员宅基地

文章浏览阅读914次。一、概述卡巴斯基全球研究与分析团队(GReAT)三年多以来一直在发布高级持续性威胁(APT)活动的季度报告。这些报告基于我们的威胁情报研究,提供了我们在私有APT报告中已经发布和详细讨论的部分内容摘要,以突出展示我们认为大家应该关注的重大事件和发现。这是我们系列报告的最新一期,重点关注我们在2020年第二季度期间观察到的活动。二、显著发现5月11日,总部位于英国的超级计算中心ARCHER宣布将在调查安全事件期间关闭对互联网的访问。其网站表明,“ARCHER设施是基于提供核心计算资源的Cray_apt实验室方案

如何阅读科研论文?_如何看科研文章-程序员宅基地

文章浏览阅读704次。本文参考自《沈向洋、华刚:读科研论文的三个层次、四个阶段与十个问题》。“大多数学生应该是在研究生院阶段,我非常喜欢这个阶段的生活,因为这可能是你一生中时间最充足的阶段,以后工作了就会非常忙。我想强调的是在这个阶段,你应该多读书、多读文章。如果你决定要从事科研工作,就需要不断地学习、理解和消化知识,再过渡到自己创造知识、散布知识。”通过科研论文的角度去思考阅读和理解之间的关系,是整个人类智能中非常重要的部分。阅读文章的三个层次:速读、精读与研读。首先是要有“速读”的能力,快速知道一篇文章讲了什么。其次_如何看科研文章