这篇文章主要介绍了微信小程序实现动态显示和隐藏某个控件功能,涉及微信小程序事件响应及样式动态操作相关实现,需要的朋友可以参考下

本文实例讲述了微信小程序实现动态显示和隐藏某个控件功能。分享给大家供大家参考,具体如下:

在小程序的开发过程中,经常需要用到隐藏某个控件这种情况。

因为项目原本是需要将两个canvas切换,但是小程序的canvas支持的功能实在是少,本来就jquery mobile或者将canvas转为图片就可以很容易实现效果,但是都不支持,最后只能是做一个canvas,需要时显示,不需要时隐藏。

实现方法:

logs.wxml

<view>
 <button bindtap="onChangeShowState">{{showView?'Click To Check IdleReason':'Click To Check MTStatus'}}</button>
</view>
<view>
 <canvas canvas-id="pieCanvas1"></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.lovean.com/table/wx_component

希望本文所述对大家微信小程序开发有所帮助。

最新资讯
百度YY在一起? 一个不停买一个连续卖

百度YY在一起? 一个不

在百度与YY传出绯闻之前,百度早已通过投资布局直播,最具
“双11”前夕:快递网点承压企业疯狂圈地

“双11”前夕:快递网点

部分快递品牌的“蹭网”行为遭遇禁止,而龙头企业整合物
线下文娱演出复苏进行时:“演员+老师+直播”多元化开拓

线下文娱演出复苏进行

作者: 乐琰 陆瑶[ 第一财经记者近期调研和采访了大量文
字节跳动考虑部分业务 单独赴港上市

字节跳动考虑部分业务

10月26日,又有消息称字节跳动正考虑推动抖音业务单独在
上海的“新特产” 7000辆特斯拉驶向欧洲

上海的“新特产” 700

今年尽管受到了疫情的影响,但特斯拉上海超级工厂的建设
富士康、立讯精密 拼抢苹果手机代工业务

富士康、立讯精密 拼

近一年来围绕在富士康以及立讯精密两家公司身上的对比
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,