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


Posted in Javascript onDecember 14, 2018

本文实例讲述了微信小程序实现动态显示和隐藏某个控件功能。分享给大家供大家参考,具体如下:

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

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

上述代码运行效果如下:

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

注:更多关于微信小程序组件相关说明还可参考:http://tools.3water.com/table/wx_component

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
javascript之对系统的toFixed()方法的修正
May 08 Javascript
不要在cookie中使用特殊字符的原因分析
Jul 13 Javascript
javascript验证身份证完全方法具体实现
Nov 18 Javascript
JavaScript中String.match()方法的使用详解
Jun 06 Javascript
学习Angularjs分页指令
Jul 01 Javascript
jQuery使用deferreds串行多个ajax请求
Aug 22 Javascript
React中的render何时执行过程
Apr 13 Javascript
基于Vue-cli快速搭建项目的完整步骤
Nov 03 Javascript
this.$toast() 了解一下?
Apr 18 Javascript
解决layer.open后laydate失效的问题
Sep 06 Javascript
JS回调函数深入理解
Oct 16 Javascript
vue+iview实现分页及查询功能
Nov 17 Vue.js
javascript中的event loop事件循环详解
Dec 14 #Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
Dec 14 #Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
Dec 13 #Javascript
node.js学习笔记之koa框架和简单爬虫练习
Dec 13 #Javascript
浅谈vuex actions和mutation的异曲同工
Dec 13 #Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
Dec 13 #Javascript
javascript对HTML字符转义与反转义
Dec 13 #Javascript
You might like
第五章 php数组操作
2011/12/30 PHP
php输出xml格式字符串(用的这个)
2012/07/12 PHP
php class中self,parent,this的区别以及实例介绍
2013/04/24 PHP
php用正则表达式匹配中文实例详解
2013/11/06 PHP
PHP之预定义接口详解
2015/07/29 PHP
php实现断点续传大文件示例代码
2020/06/19 PHP
jQuery 连续列表实现代码
2009/12/21 Javascript
javascript XMLHttpRequest对象全面剖析
2010/04/24 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
2015/09/25 Javascript
Javascript实现汉字和拼音互转的终极方案
2016/10/19 Javascript
JS实现类似百叶窗下拉菜单效果
2016/12/30 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
2017/02/20 Javascript
angularjs实现多张图片上传并预览功能
2017/02/24 Javascript
webpack@v4升级踩坑(小结)
2018/10/08 Javascript
vue计算属性computed的使用方法示例
2019/03/13 Javascript
微信公众平台获取access_token的方法步骤
2019/03/29 Javascript
[05:29]2014DOTA2国际邀请赛 赛后专访:LGDNewbee顺利过关
2014/07/13 DOTA
[59:00]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第一场 3月7日
2021/03/11 DOTA
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
Tornado高并发处理方法实例代码
2018/01/15 Python
centos6.8安装python3.7无法import _ssl的解决方法
2018/09/17 Python
Selenium chrome配置代理Python版的方法
2018/11/29 Python
Python XML转Json之XML2Dict的使用方法
2019/01/15 Python
Python实现Selenium自动化Page模式
2019/07/14 Python
Python实现病毒仿真器的方法示例(附demo)
2020/02/19 Python
python模拟点击网页按钮实现方法
2020/02/25 Python
使用OpenCV获取图像某点的颜色值,并设置某点的颜色
2020/06/02 Python
python switch 实现多分支选择功能
2020/12/21 Python
ALDO英国官网:加拿大女鞋品牌
2018/02/19 全球购物
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
Diptyque英国官方网站:源自法国的知名香氛品牌
2019/08/28 全球购物
数字化校园建设方案
2014/05/03 职场文书
网球场地租赁协议范本
2014/10/07 职场文书
群众路线剖析材料范文
2014/10/09 职场文书
2015年留守儿童工作总结
2015/05/22 职场文书
观看建国大业观后感
2015/06/01 职场文书