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


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 相关文章推荐
封装的jquery翻页滚动(示例代码)
Nov 18 Javascript
通过$(this)使用jQuery包装后的方法或属性
May 18 Javascript
JavaScript设计模式之适配器模式介绍
Dec 28 Javascript
js判断主流浏览器类型和版本号的简单实现代码
May 26 Javascript
浅析JavaScript中命名空间namespace模式
Jun 22 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
Jul 22 Javascript
JavaScript中的对象和原型(一)
Aug 12 Javascript
微信小程序 UI布局常用技巧整理总结
Dec 05 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
Feb 04 Javascript
Angular网络请求的封装方法
May 22 Javascript
react实现移动端下拉菜单的示例代码
Jan 16 Javascript
Node使用Nodemailer发送邮件的方法实现
Feb 24 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
Thinkphp3.2.3分页使用实例解析
2016/07/28 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
PHP时间日期增减操作示例【date strtotime实现加一天、加一月等操作】
2018/12/21 PHP
php装饰者模式简单应用案例分析
2019/10/23 PHP
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
2011/10/31 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
2012/12/09 Javascript
JavaScript学习笔记之Cookie对象
2015/01/22 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
2016/08/19 Javascript
深入理解选择框脚本[推荐]
2016/12/13 Javascript
JS实现的数字格式化功能示例
2017/02/10 Javascript
js实现滑动到页面底部自动加载更多功能
2017/02/15 Javascript
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
jQuery动态生成的元素绑定事件操作实例分析
2019/05/04 jQuery
深入了解JavaScript 私有化
2019/05/30 Javascript
JavaScript如何获取一个元素的样式信息
2019/07/29 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
解决Vue打包上线之后部分CSS不生效的问题
2019/11/12 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
python下载文件时显示下载进度的方法
2015/04/02 Python
使用python对多个txt文件中的数据进行筛选的方法
2019/07/10 Python
通过selenium抓取某东的TT购买记录并分析趋势过程解析
2019/08/15 Python
python实现静态web服务器
2019/09/03 Python
Python中的单下划线和双下划线使用场景详解
2019/09/09 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
Python限制内存和CPU使用量的方法(Unix系统适用)
2020/08/04 Python
请解释流与文件有什么不同
2016/07/29 面试题
个人简历自我评价八例
2013/10/31 职场文书
2015年宣传部个人工作总结
2015/05/14 职场文书
公司员工手册范本
2015/05/14 职场文书
Windows server 2012 R2 安装IIS服务器
2022/04/29 Servers
Windows server 2003卸载和安装IIS的图文教程
2022/07/15 Servers