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


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 相关文章推荐
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
Apr 15 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
Sep 19 Javascript
js触发asp.net的Button的Onclick事件应用
Feb 02 Javascript
javascript中创建对象的几种方法总结
Nov 01 Javascript
JavaScript splice()方法详解
Sep 22 Javascript
js脚本实现数据去重
Nov 27 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
Aug 05 Javascript
jQuery实现TAB选项卡切换特效简单演示
Mar 04 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
Feb 05 Javascript
vue表单绑定实现多选框和下拉列表的实例
Aug 12 Javascript
vue视频播放插件vue-video-player的具体使用方法
Nov 08 Javascript
Vue常用API、高级API的相关总结
Feb 02 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
wordpress之wp-settings.php
2007/08/17 PHP
php中配置文件操作 如config.php文件的读取修改等操作
2012/07/07 PHP
ThinkPHP验证码使用简明教程
2014/03/05 PHP
php实现给图片加灰色半透明效果的方法
2014/10/20 PHP
php继承中方法重载(覆盖)的应用场合
2015/02/09 PHP
PHP遍历数组的三种方法及效率对比分析
2015/02/12 PHP
PHP实现的猴王算法(猴子选大王)示例
2018/04/30 PHP
PHP精确到毫秒秒杀倒计时实例详解
2019/03/14 PHP
第一个JavaScript入门基础 document.write输出
2010/02/22 Javascript
下拉框select的绑定示例
2014/09/04 Javascript
javascript常用函数(2)
2015/11/05 Javascript
jquery转盘抽奖功能实现
2015/11/13 Javascript
jQuery插件echarts去掉垂直网格线用法示例
2017/03/03 Javascript
Bootstrap媒体对象学习使用
2017/03/07 Javascript
vue如何实现observer和watcher源码解析
2017/03/09 Javascript
动手写一个angular版本的Message组件的方法
2017/12/16 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
2020/04/08 Javascript
Pythony运维入门之Socket网络编程详解
2019/04/15 Python
Python Django框架单元测试之文件上传测试示例
2019/05/17 Python
keras绘制acc和loss曲线图实例
2020/06/15 Python
html5 worker 实例(二) 图片变换效果
2013/06/24 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
2019/06/17 HTML / CSS
瑞典廉价机票预订网站:Seat24
2018/06/19 全球购物
新年联欢会主持词
2014/03/27 职场文书
母校寄语大全
2014/04/10 职场文书
2014国庆节幼儿园亲子活动方案
2014/09/16 职场文书
房产公证委托书范本
2014/09/20 职场文书
2014年综合治理工作总结
2014/11/20 职场文书
忠诚与背叛观后感
2015/06/04 职场文书
天堂的孩子观后感
2015/06/11 职场文书
小学主题班会教案
2015/08/17 职场文书
2019年销售人员的职业生涯规划书
2019/03/25 职场文书
python OpenCV学习笔记
2021/03/31 Python
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers