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


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 相关文章推荐
IE下Ajax缓存问题的快速解决方法(get方式)
Jan 09 Javascript
js登录弹出层特效
Mar 07 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 Javascript
jQuery Easyui快速入门教程
Aug 21 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
May 02 Javascript
详解使用VueJS开发项目中的兼容问题
Aug 02 Javascript
js实现倒计时器自定义时间和暂停
Feb 25 Javascript
bootstrap实现嵌套模态框的实例代码
Jan 10 Javascript
JavaScript函数Call、Apply原理实例解析
Feb 17 Javascript
Vue点击切换Class变化,实现Active当前样式操作
Jul 17 Javascript
OpenLayer学习之自定义测量控件
Sep 28 Javascript
如何将Node.js中的回调转换为Promise
Nov 10 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和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
PHP编码规范的深入探讨
2013/06/06 PHP
用javascript父窗口控制只弹出一个子窗口
2007/04/10 Javascript
把JS与CSS写在同一个文件里的书写方法
2007/06/02 Javascript
Jquery中val()表单取值赋值的实例代码
2013/08/15 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
2013/09/18 Javascript
jquery中each遍历对象和数组示例
2014/08/05 Javascript
JavaScript中常见获取元素的方法汇总
2015/03/04 Javascript
JavaScript对Cookie进行读写操作实例
2015/07/25 Javascript
Bootstrap Fileinput文件上传组件用法详解
2016/05/10 Javascript
js定义类的几种方法(推荐)
2016/06/08 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
2016/10/11 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
2017/10/27 Javascript
jQuery实现的记住帐号密码功能完整示例
2019/08/03 jQuery
JavaScript canvas实现雪花随机动态飘落
2020/02/08 Javascript
JS实现前端动态分页码代码实例
2020/06/02 Javascript
Python实现数通设备端口使用情况监控实例
2015/07/15 Python
python中pygame针对游戏窗口的显示方法实例分析(附源码)
2015/11/11 Python
如何在Python函数执行前后增加额外的行为
2016/10/20 Python
分析Python读取文件时的路径问题
2018/02/11 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
用openCV和Python 实现图片对比,并标识出不同点的方式
2019/12/19 Python
matlab中imadjust函数的作用及应用举例
2020/02/27 Python
python破解同事的压缩包密码
2020/10/14 Python
python爬虫利器之requests库的用法(超全面的爬取网页案例)
2020/12/17 Python
HTML5 video 事件应用示例
2014/09/11 HTML / CSS
美国网上花店:JustFlowers
2017/02/12 全球购物
FitFlop美国官网:英国符合人体工学的鞋类品牌
2018/10/05 全球购物
某IT外企面试题-二分法求方程!看看大家的C++功底
2015/07/04 面试题
拉丁舞学习者的自我评价
2013/10/27 职场文书
领导班子遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
2014年班级工作总结
2014/11/14 职场文书
任命书格式范文
2015/09/22 职场文书
2016年共产党员个人承诺书
2016/03/24 职场文书
Python内置包对JSON文件数据进行编码和解码
2022/04/12 Python