微信小程序实现动态显示和隐藏某个控件功能示例
本文实例讲述了微信小程序实现动态显示和隐藏某个控件功能。分享给大家供大家参考,具体如下:
在小程序的开发过程中,经常需要用到隐藏某个控件这种情况。
因为项目原本是需要将两个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
希望本文所述对大家微信小程序开发有所帮助。
相关文章
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
这篇文章主要介绍了最全正则表达式:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等,通过语法介绍作用表达式等详细解释了正则表达式的使用,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。2017-08-08微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
这篇文章主要介绍了微信小程序使用map组件实现检索(定位位置)周边的POI功能,涉及微信小程序基于map组件与高德地图PAI接口的定位操作相关使用技巧,需要的朋友可以参考下2019-01-01JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
这篇文章主要介绍了JS实现对中文字符串进行utf-8的Base64编码的方法,对比java的base64编码程序,分析了javascript实现base64编码的相关技巧,需要的朋友可以参考下2016-06-06JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
下面小编就为大家分享一篇JS实现点击下拉菜单把选择的内容同步到input输入框内的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
最新评论