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

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

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

因为项目原本是需要将两个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

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

最新资讯
传苹果下半年或明年初推出新款MacBook Air 更轻薄且配备MagSafe

传苹果下半年或明年初

苹果公司计划将该设备作为当前MacBook Air的高端版本
悦刻电子烟登陆纽交所:开盘价24美元 较发行价上涨100%

悦刻电子烟登陆纽交所

电子烟企业雾芯科技(悦刻)今日正式登陆纽交所,股票代码为
雾芯科技美国上市:市值超百亿美元 红杉为股东

雾芯科技美国上市:市值

电子雾化龙头企业雾芯科技(股票代码为:“RLX”)今日在纽
快手科技据称吸引Capital Group等参与其60亿美元IPO计划

快手科技据称吸引Capi

知情人士透露,Capital Group和加拿大养老金计划投资委
任正非:华为有信心活下来!不要盲目争第一

任正非:华为有信心活下

任正非表示,华为有信心、有决心活下来。华为坚持自强与
科技巨头财报来袭 苹果、微软、FB财报前瞻先睹为快

科技巨头财报来袭 苹

下周科技巨头密集公布财报,苹果、微软、Facebook财报前
最新文章
详解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支持,