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


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 相关文章推荐
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
Apr 29 Javascript
jQuery中使用了document和window哪些属性和方法小结
Sep 13 Javascript
判断js对象是否拥有某一个属性的js代码
Aug 16 Javascript
jquery小火箭返回顶部代码分享
Aug 19 Javascript
兼容浏览器的js事件绑定函数(详解)
May 09 Javascript
深入理解vue2.0路由如何配置问题
Jul 18 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
AngularJS 的$timeout服务示例代码
Sep 21 Javascript
详解JS模块导入导出
Dec 20 Javascript
解决webpack无法通过IP地址访问localhost的问题
Feb 22 Javascript
Vue组件创建和传值的方法
Aug 17 Javascript
JavaScript onclick事件使用方法详解
May 15 Javascript
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 和 MySQL 基础教程(三)
2006/10/09 PHP
$_GET['goods_id']+0 的使用详解
2013/06/06 PHP
编写Smarty插件在模板中直接加载数据的详细介绍
2013/06/26 PHP
thinkphp中AJAX返回ajaxReturn()方法分析
2016/12/06 PHP
Yii2框架实现登陆添加验证码功能示例
2018/07/12 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
2010/11/11 Javascript
使用JavaScript动态设置样式实现代码及演示动画
2013/01/25 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
2014/05/05 Javascript
使用nodejs、Python写的一个简易HTTP静态文件服务器
2014/07/18 NodeJs
一款基于jQuery的图片场景标注提示弹窗特效
2015/01/05 Javascript
JS继承之借用构造函数继承和组合继承
2016/09/07 Javascript
JavaScript使用FileReader实现图片上传预览效果
2020/03/27 Javascript
AngularJS 监听变量变化的实现方法
2018/10/09 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
2018/11/08 Javascript
微信小程序实现左侧滑栏过程解析
2019/08/26 Javascript
[01:01:43]EG vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
python使用递归解决全排列数字示例
2014/02/11 Python
python 第三方库的安装及pip的使用详解
2017/05/11 Python
python爬虫之百度API调用方法
2017/06/11 Python
Python 将pdf转成图片的方法
2018/04/23 Python
pycharm运行和调试不显示结果的解决方法
2018/11/30 Python
python pyenv多版本管理工具的使用
2019/12/23 Python
HTML5使用Audio标签实现歌词同步的效果
2016/03/17 HTML / CSS
LocalStorage记住用户和密码功能
2017/07/24 HTML / CSS
html5手机端页面可以向右滑动导致样式受影响的问题
2018/06/20 HTML / CSS
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
Julep官网:美容产品和指甲油
2017/02/25 全球购物
Max&Co官网:意大利年轻女性时尚品牌
2017/05/16 全球购物
《燕子专列》教学反思
2014/02/21 职场文书
党员国庆节演讲稿范文2014
2014/09/21 职场文书
教师节横幅标语
2014/10/08 职场文书
唐山大地震观后感
2015/06/05 职场文书
2015年社区国庆节活动总结
2015/07/30 职场文书
《分数乘法》教学反思
2016/02/24 职场文书
2016年小学优秀班主任事迹材料
2016/02/29 职场文书