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


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 相关文章推荐
多个iframe自动调整大小的问题
Sep 18 Javascript
javascript fullscreen全屏实现代码
Apr 09 Javascript
收集json解析的四种方法分享
Jan 17 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
Dec 04 Javascript
关于JavaScript作用域你想知道的一切
Feb 04 Javascript
基于Vue实现timepicker
Apr 25 Javascript
jquery ztree实现右键收藏功能
Nov 20 jQuery
Node.js静态服务器的实现方法
Feb 28 Javascript
vue轮播图插件vue-concise-slider的使用
Mar 13 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
Jun 10 Javascript
js Array.slice的8种不同用法示例
Jul 10 Javascript
vue如何批量引入组件、注册和使用详解
May 12 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中的流(streams)浅析
2015/07/02 PHP
PHP+redis实现添加处理投票的方法
2015/11/14 PHP
重定向实现代码
2006/11/20 Javascript
jMessageBox 基于jQuery的窗口插件
2009/12/09 Javascript
javascript中onmouse事件在div中失效问题的解决方法
2012/01/09 Javascript
js给onclick事件赋值,动态传参数实例解说
2013/03/28 Javascript
Jquery getJSON方法详细分析
2013/12/26 Javascript
jquery获取复选框被选中的值
2014/03/22 Javascript
php+js实现倒计时功能
2014/06/02 Javascript
jquery分割字符串的方法
2015/06/24 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
2015/12/18 Javascript
ES6概念 Symbol toString()方法
2016/12/25 Javascript
JS中SetTimeout和SetInterval使用初探
2017/03/23 Javascript
vue.js指令和组件详细介绍及实例
2017/04/06 Javascript
Javascript刷新页面的实例
2017/09/23 Javascript
微信小程序实现文字跑马灯效果
2020/05/26 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
2018/12/03 Javascript
更优雅的微信小程序骨架屏实现详解
2019/08/07 Javascript
浅谈vue权限管理实现及流程
2020/04/23 Javascript
JS实现网站楼层导航效果代码实例
2020/06/16 Javascript
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
Python制作爬虫抓取美女图
2016/01/20 Python
qpython3 读取安卓lastpass Cookies
2016/06/19 Python
Python进阶_关于命名空间与作用域(详解)
2017/05/29 Python
Python3下错误AttributeError: ‘dict’ object has no attribute’iteritems‘的分析与解决
2017/07/06 Python
Python设计模式之迭代器模式原理与用法实例分析
2019/01/10 Python
Python包和模块的分发详细介绍
2020/06/19 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
人力资源经理自我评价
2014/01/04 职场文书
学习党章思想汇报
2014/01/07 职场文书
致跳远运动员加油稿
2014/02/11 职场文书
大学学生会竞选稿
2015/11/19 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书
python 机器学习的标准化、归一化、正则化、离散化和白化
2021/04/16 Python
golang操作rocketmq的示例代码
2022/04/06 Golang