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


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事件冒泡传递(cancelBubble 、stopPropagation)
May 08 Javascript
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
Jun 02 Javascript
JavaScript Event学习补遗 addEventSimple
Feb 11 Javascript
JavaScript 函数replace深入了解
Mar 14 Javascript
js 窗口抖动示例
Sep 04 Javascript
Node.js实现的简易网页抓取功能示例
Dec 05 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
Dec 31 Javascript
详解vue2.0 资源文件assets和static的区别
Nov 27 Javascript
@angular前端项目代码优化之构建Api Tree的方法
Dec 24 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
Sep 23 Javascript
JS定时器如何实现提交成功提示功能
Jun 12 Javascript
vue使用video插件vue-video-player详解
Oct 23 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在程序中将网页生成word文档并提供下载的代码
2012/10/09 PHP
php实现获取文章内容第一张图片的方法
2014/11/04 PHP
基于PHP实现邮箱验证激活过程详解
2020/10/28 PHP
js left,right,mid函数
2008/06/10 Javascript
MooTools 1.2介绍
2009/09/14 Javascript
Raphael带文本标签可拖动的图形实现代码
2013/02/20 Javascript
javascript 原型链维护和继承详解
2014/11/26 Javascript
Javascript 调用 ActionScript 的简单方法
2016/09/22 Javascript
详解js中call与apply关键字的作用
2016/11/21 Javascript
解析预加载显示图片艺术
2016/12/05 Javascript
vue分类筛选filter方法简单实例
2017/03/30 Javascript
详解vue过滤器在v2.0版本用法
2017/06/01 Javascript
mpvue构建小程序的方法(步骤+地址)
2018/05/22 Javascript
基于webpack4搭建的react项目框架的方法
2018/06/30 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
2020/06/02 Javascript
vue-router 控制路由权限的实现
2020/09/24 Javascript
Python网络编程 Python套接字编程
2017/09/13 Python
修复 Django migration 时遇到的问题解决
2018/06/14 Python
快速解决pandas.read_csv()乱码的问题
2018/06/15 Python
Python3中urlencode和urldecode的用法详解
2019/07/23 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
python3.5的包存放的具体路径
2020/08/16 Python
Python ellipsis 的用法详解
2020/11/20 Python
HTML5实现视频弹幕功能
2019/08/09 HTML / CSS
Photobook澳大利亚:制作相片书,婚礼卡,旅行相簿
2017/01/12 全球购物
英国快时尚女装购物网站:PrettyLittleThing
2018/08/15 全球购物
VC++笔试题
2014/10/13 面试题
英语系本科生个人求职信
2013/09/21 职场文书
影视动画专业个人的自我评价
2013/12/31 职场文书
大学生创业计划书的用途
2014/01/08 职场文书
工作疏忽检讨书
2014/01/25 职场文书
留学推荐信范文
2014/05/10 职场文书
中国梦团日活动总结
2014/07/07 职场文书
物联网工程专业推荐信
2014/09/08 职场文书
家属联谊会致辞
2015/07/31 职场文书
Python matplotlib 利用随机函数生成变化图形
2022/04/26 Python