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


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 相关文章推荐
Flash对联广告的关闭按钮讨论
Jan 30 Javascript
用jquery和json从后台获得数据集的代码
Nov 07 Javascript
浅谈javascript 函数内部属性
Jan 21 Javascript
JS功能代码集锦
May 04 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
Sep 20 Javascript
AngularJS实现ajax请求的方法
Nov 22 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
Jun 11 Javascript
浅谈React Native 中组件的生命周期
Sep 08 Javascript
深入理解React高阶组件
Sep 28 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
JS 数组和对象的深拷贝操作示例
Jun 06 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
Jul 19 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
服务器变量 $_SERVER 的深入解析
2013/07/02 PHP
PHP设置一边执行一边输出结果的代码
2013/09/30 PHP
详解WordPress中用于合成数组的wp_parse_args()函数
2015/12/18 PHP
分享一款基于jQuery的视频播放插件
2014/10/09 Javascript
Javascript闭包实例详解
2015/11/29 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
2016/05/10 Javascript
VC调用javascript的几种方法(推荐)
2016/08/09 Javascript
JavaScript中数组Array.sort()排序方法详解
2017/03/01 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
2018/05/28 jQuery
关于Vue组件库开发详析
2018/07/01 Javascript
详解vue更改头像功能实现
2019/04/28 Javascript
layui table设置某一行的字体颜色方法
2019/09/05 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
2020/12/05 Javascript
Python struct模块解析
2014/06/12 Python
python实现指定字符串补全空格的方法
2015/04/30 Python
Python的Urllib库的基本使用教程
2015/04/30 Python
Python OpenCV 直方图的计算与显示的方法示例
2018/02/08 Python
numpy 进行数组拼接,分别在行和列上合并的实例
2018/05/08 Python
Python实现的拟合二元一次函数功能示例【基于scipy模块】
2018/05/15 Python
python 实现将字典dict、列表list中的中文正常显示方法
2018/07/06 Python
Falsk 与 Django 过滤器的使用与区别详解
2019/06/04 Python
Python数据结构与算法(几种排序)小结
2019/06/22 Python
如何在VSCode上轻松舒适的配置Python的方法步骤
2019/10/28 Python
Python高级property属性用法实例分析
2019/11/19 Python
Python新手学习标准库模块命名
2020/05/29 Python
Python如何在循环内使用list.remove()
2020/06/01 Python
使用Python绘制台风轨迹图的示例代码
2020/09/21 Python
python实现逻辑回归的示例
2020/10/09 Python
Laura Geller官网:美国彩妆品牌
2018/12/29 全球购物
完美主义个人的自我评价
2014/02/17 职场文书
客运企业隐患排查工作方案
2014/06/06 职场文书
爱心捐书活动总结
2014/07/05 职场文书
2015年青年志愿者协会工作总结
2015/04/27 职场文书
大学生干部培训心得体会
2016/01/06 职场文书
应届生们该怎么书写求职信?
2019/07/05 职场文书
Go 自定义package包设置与导入操作
2021/05/06 Golang