微信小程序实现动态显示和隐藏某个控件功能示例
2018-12-16 20:14
2396 查看
本文实例讲述了微信小程序实现动态显示和隐藏某个控件功能。分享给大家供大家参考,具体如下:
在小程序的开发过程中,经常需要用到隐藏某个控件这种情况。
因为项目原本是需要将两个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.jb51.net/table/wx_component
希望本文所述对大家微信小程序开发有所帮助。
您可能感兴趣的文章:
相关文章推荐
- 微信小程序 实现动态显示和隐藏某个控件
- 微信小程序 实现动态显示和隐藏某个控件
- 微信小程序开发之radio实现显示和隐藏功能 原创 2017年07月04日 20:33:07 标签: 前端开发 / 微信 我们在开发微信小程序的时候,经常会用到显示和隐藏,
- 微信小程序动态的显示或隐藏控件的方法(两种方法)
- 微信小程序开发之radio实现显示和隐藏功能
- 【微信小程序】小程序动态显示和隐藏某个控件
- php+javascript实现的动态显示服务器运行程序进度条功能示例
- 微信小程序 动态的显示或隐藏控件
- 微信小程序实践之动态控制组件的显示/隐藏功能
- 微信小程序点击实现隐藏和点击实现显示
- 微信小程序 通过控制CSS实现view隐藏与显示
- 详解微信小程序 通过控制CSS实现view隐藏与显示
- 微信小程序 —— 动态决定页面元素显示或隐藏的技巧
- jQuery基于闭包实现的显示与隐藏div功能示例
- 微信小程序 —— 动态决定页面元素显示或隐藏的技巧
- 微信小程序之多列表的显示和隐藏功能【附源码】
- Jquery实现动态效果的显示和隐藏控件
- 微信小程序自定义导航隐藏和显示功能
- 微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
- 微信小程序实现的涂鸦功能示例【附源码下载】