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


Posted in Javascript onApril 27, 2017

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

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

因为项目原本是需要将两个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属性哪个是否显示

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

Javascript 相关文章推荐
JavaScript 创建对象
Jul 17 Javascript
js操作时间(年-月-日 时-分-秒 星期几)
Jun 20 Javascript
javascript 全选与全取消功能的实现代码
Dec 23 Javascript
jQuery下的动画处理总结
Oct 10 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
Jan 07 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
Feb 07 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
Mar 26 Javascript
JS函数的定义与调用方法推荐
May 12 Javascript
JavaScript定义函数_动力节点Java学院整理
Jun 27 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 Javascript
vue相同路由跳转强制刷新该路由组件操作
Aug 05 Javascript
ES6 十大特性简介
Dec 09 Javascript
JS ES6中setTimeout函数的执行上下文示例
Apr 27 #Javascript
Vue实现购物车功能
Apr 27 #Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
Apr 27 #Javascript
Angular.js中定时器循环的3种方法总结
Apr 27 #Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
Apr 27 #Javascript
微信小程序 wx:for的使用实例详解
Apr 27 #Javascript
微信小程序 动态传参实例详解
Apr 27 #Javascript
You might like
PHP常用函数和常见疑难问题解答
2014/03/05 PHP
php对称加密算法示例
2014/05/07 PHP
Yii分页用法实例详解
2014/12/04 PHP
PHP设计模式之适配器模式代码实例
2015/05/11 PHP
PHP递归遍历指定文件夹内的文件实现方法
2016/11/15 PHP
详解PHP字符串替换str_replace()函数四种用法
2017/10/13 PHP
PHP执行系统命令函数实例讲解
2021/03/03 PHP
js处理自己不能定义二维数组的方法详解
2014/03/03 Javascript
javascript函数命名的三种方式及区别介绍
2016/03/22 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
2017/02/10 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
2017/02/27 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
2017/03/14 Javascript
vue2.0 自定义日期时间过滤器
2017/06/07 Javascript
node跨域请求方法小结
2017/08/25 Javascript
angularjs实现猜大小功能
2017/10/23 Javascript
Three.js加载外部模型的教程详解
2017/11/10 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
2017/12/15 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
2019/09/01 Javascript
JavaScript进阶(一)变量声明提升实例分析
2020/05/09 Javascript
[48:24]完美世界DOTA2联赛循环赛LBZS vs Forest 第一场 10月30日
2020/10/31 DOTA
python中requests模块的使用方法
2015/04/08 Python
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
Face++ API实现手势识别系统设计
2018/11/21 Python
Python 模拟动态产生字母验证码图片功能
2019/12/24 Python
python 实现在无序数组中找到中位数方法
2020/03/03 Python
Python数据可视化实现多种图例代码详解
2020/07/14 Python
html5的新玩法——语音搜索
2013/01/03 HTML / CSS
大学毕业生文采飞扬的自我鉴定
2013/12/03 职场文书
入党积极分子自我鉴定
2014/02/18 职场文书
社区创先争优承诺书
2014/08/30 职场文书
死亡证明书样本说明
2014/10/18 职场文书
运动会广播稿200字
2015/08/19 职场文书
3招让你摆脱即兴讲话冷场尴尬
2019/08/08 职场文书
话题作文之呼唤
2019/12/18 职场文书
15个值得收藏的JavaScript函数
2021/09/15 Javascript
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript