当前位置:首页 > 日记 > 正文

微信小程序 实现动态显示和隐藏某个控件

微信小程序 实现动态显示和隐藏某个控件

微信小程序 实现动态显示和隐藏某个控件

在小程序的开发过程中,经常需要用到隐藏某个控件这种情况。

因为项目原本是需要将两个canvas切换,但是小程序的canvas支持的功能实在是少,本来就jQuery mobile或者将canvas转为图片就可以很容易实现滑动效果,但是都不支持,最后只能是做一个canvas,需要时显示,不需要时隐藏。

实现方法:

logs.wxml

<view>  <button bindtap="onChangeShowState">{{showView?'Click To Check IdleReason':'Click To Check MTStatus'}}</button> </view> <view class="{{showView?'bright789_view_show':'bright789_view_hide'}}">  <canvas canvas-id="pieCanvas1" style="width:400px;height:280px;"></canvas> </view> 

logs.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)   })  }, }) 

logs.wxss

.bright789_view_hide{  display: none; } .bright789_view_show{  display: block; } 

从上面三个页面的文件可以很明显看出逻辑:logs.wxml的onChangeShowState按钮会在logs.js中触发一个事件,它会改变showView的值,而在logs.wxml中会根据showView的值确定画布canvas的class属性,而在logs.wxss中具体再设置两个class属性哪个是否显示

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

相关文章

浅谈node中的exports与module.expo

浅谈node中的exports与module.expo

浅谈,关系,电脑软件,exports,node,因为是做前端的,对node的生态一直也比较关注,对于node中对commonJS模块化的实现给了我们很大的方便,之前对于导出的module.exports和exports一直模模糊糊,今天做一个整理先来个js基础部分的复习let obj1 =…

JavaScript编写九九乘法表(两种任选

JavaScript编写九九乘法表(两种任选

九九乘法表,两种,电脑软件,JavaScript,话不多说,请看代码:<script language=javascript>for(i=1;i<=9;i++){for(j=1;j<=9;j++){document.write (i+"*"+j+"="+i*j+" ");if(i==j) {document.write ("<br/>"); break;} //用的if语句,如果…

详解node.js搭建代理服务器请求数

详解node.js搭建代理服务器请求数

请求数据,代理服务器,详解,电脑软件,js,1、引入node.js中的模块 var http = require("http"); var url = require("url"); var qs = require("querystring");2、创建服务器//用node中的http创建服务器 并传入两个形参http.createServ…

Word2013文档多页显示开启和取消的

Word2013文档多页显示开启和取消的

取消,文档,显示,方法,多页,  Word文档中,在编辑文档的时候,用户可以根据自己的实际需要进行文档的多页显示以及取消多页显示。以下是小编为您带来的关于Word2013文档多页显示开启和取消,希望对您有所帮助。Word2013文档多页显示开启和取消1…

PS斜线底纹如何制作 ps快速制作斜

PS斜线底纹如何制作 ps快速制作斜

教程,底纹,快速,电脑软件,PS,为了大家更直观的看到这个小技巧所以做好的图片用的是有背景的图片效果图:主要过程:教程结束,以上就是PS斜线底纹如何制作 ps快速制作斜线底纹教程的全部内容,你学会了吗?相关教程推荐:PS怎么制作斜线背景? ps制作斜…

jquery实现左右轮播图效果

jquery实现左右轮播图效果

轮播图,效果,电脑软件,jquery,我们经常看到购物网站上首页有轮播图,比如某东某京 如图我们打开网页就看到京东的轮播图接下来,这个小案例就是要介绍如何实现这种效果,即这张轮播图上所有的事件. 首先 我们看到轮播图上的有1.左右的小按钮(图片…

wps表格怎么设置整体缩小

wps表格怎么设置整体缩小

放大缩小,设置,方法,缩小,表格,  放大和缩小excel表主要是方便我们预览,其实放大和缩小excel表有好几种方法,那下面小编告诉wps表格怎么放大缩小工作表吧,希望看完本教程的朋友都能学会wps表格并运用起来。wps表格放大缩小工作表的方法首先…

ppt2010怎么打包

ppt2010怎么打包

电脑软件,  所谓打包,指的就是将独立的已综合起来共同使用的单个或多个文件,集成在一起,生成一种独立于运行环境的文件。将PPT打包能解决运行环境的限制和文件损坏或无法调用的不可预料的问题,那么下面小编就教你ppt2010怎么打包。ppt2010打…

excel表格添加分割线的方法excel表

excel表格添加分割线的方法excel表

分割线,方法,表格,电脑软件,excel,  在用EXCEL办公中,经常要在表格中添加分割线。Excel中的分割线具体该如何进行添加呢?接下来是小编为大家带来的excel表格添加分割线的方法,供大家参考。excel表格添加分割线的方法添加分割线步骤1:首先打…

Word中2010版设置带颜色底纹样式的

Word中2010版设置带颜色底纹样式的

设置,操作技巧,底纹,样式,颜色,  在Word中我们可对表格进行很多操作,有时我们需要对表格的标题栏、某一个单元格设置底纹、以及不同颜色的底纹。那么我们在哪里设置底纹呢,今天,小编就教大家在Word中2010版设置带颜色底纹样式的操作技巧。Wo…

bootstrap select下拉搜索插件使用

bootstrap select下拉搜索插件使用

搜索,插件,使用方法,详解,电脑软件,bootstrap-select是boot的下拉搜索插件,使用的时候有时我们需要动态从后台 或者 直接加载动态数据。下面是根据一级下拉菜单,动态加载二级联动方式。(不是ajax后台获取)首先引入js与css文件(一个css两个js)<lin…

Photoshop设计复古立体的体育主题

Photoshop设计复古立体的体育主题

教程,字体,主题,体育,电脑软件,教大家如何使用Photoshop设计复古立体的体育主题字体lo,这种字体效果我们经常在一些体育节目上可以看到,或者一些体育相关的LO设计也经常使用这个风格,整体的效果很漂亮,复古而富有立体感,而且难度也不大,推荐过来…