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


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 相关文章推荐
JS和JQ的event对象区别分析
Nov 24 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
Mar 03 Javascript
node.js中 stream使用教程
Aug 28 Javascript
让编辑器支持word复制黏贴、截屏的js代码
Oct 17 Javascript
利用浮层使select不可选的实现方法
Dec 03 Javascript
详解使用JS如何制作简单的ASCII图与单极图
Mar 31 Javascript
微信JS-SDK选取手机照片上传功能
Apr 21 Javascript
ES6中参数的默认值语法介绍
May 03 Javascript
详解webpack 最简打包结果分析
Feb 20 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
Jul 31 Javascript
js+canvas实现刮刮奖功能
Sep 13 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
Nov 05 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中处理模拟rewrite 效果
2006/12/09 PHP
php自定义函数之递归删除文件及目录
2010/08/08 PHP
PHP运行环境配置与开发环境的配置(图文教程)
2013/06/04 PHP
php实现猴子选大王问题算法实例
2015/04/20 PHP
nginx+thinkphp下解决不支持pathinfo模式
2015/07/01 PHP
PHP代码维护,重构变困难的4种原因分析
2016/01/25 PHP
Zend Framework入门教程之Zend_Registry组件用法详解
2016/12/09 PHP
laravel5.6 框架邮件队列database驱动简单demo示例
2020/01/26 PHP
读jQuery之二(两种扩展)
2011/06/11 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
jQuery ready()和onload的加载耗时分析
2016/09/08 Javascript
Angular2 (RC4) 路由与导航详解
2016/09/21 Javascript
vue+Java后端进行调试时解决跨域问题的方式
2017/10/19 Javascript
JS中数据结构之栈
2019/01/01 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
2020/04/25 Javascript
Nuxt 项目性能优化调研分析
2020/11/07 Javascript
如何在vue中使用HTML 5 拖放API
2021/01/14 Vue.js
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
2021/02/24 Javascript
python数组复制拷贝的实现方法
2015/06/09 Python
Python字符串格式化
2015/06/15 Python
python3读取csv和xlsx文件的实例
2018/06/22 Python
flask入门之表单的实现
2018/07/18 Python
使用python爬取微博数据打造一颗“心”
2019/06/28 Python
使用python实现滑动验证码功能
2019/08/05 Python
python绘制玫瑰的实现代码
2020/03/02 Python
HTML5 Canvas中使用用路径描画圆弧
2015/01/01 HTML / CSS
英国复古服装和球衣购买网站:3Retro Football
2018/07/09 全球购物
会议欢迎标语
2014/06/30 职场文书
新闻编辑求职信
2014/07/13 职场文书
竞聘报告优秀范文
2014/11/06 职场文书
2014年终工作总结范本
2014/12/15 职场文书
事业单位聘任报告
2015/03/02 职场文书
技术员岗位职责范本
2015/04/11 职场文书
详解非极大值抑制算法之Python实现
2021/06/28 Python
mysql中varchar类型的日期进行比较、排序等操作的实现
2021/11/17 MySQL
python playwright之元素定位示例详解
2022/07/23 Python