小程序模板网

微信小程序动态显示和隐藏某个控件

作者:萌神哆啦A梦,来自原文地址 
在小程序的开发过程中,经常需要用到隐藏某个控件这种情况。

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

实现方法:

logs.wxml

 

				
  1. <view>
  2. <button bindtap="onChangeShowState">{{showView?'Click To Check IdleReason':'Click To Check MTStatus'}}</button>
  3. </view>
  4. <view class="{{showView?'bright789_view_show':'bright789_view_hide'}}">
  5. <canvas canvas-id="pieCanvas1" style="width:400px;height:280px;"></canvas>
  6. </view>

logs.js

 

				
  1. Page({
  2. data: {
  3. showView: true
  4. },
  5. onLoad: function (options) {
  6. // 生命周期函数--监听页面加载
  7. showView: (options.showView == "true" ? true : false)
  8. }
  9. , onChangeShowState: function () {
  10. var that = this;
  11. that.setData({
  12. showView: (!that.data.showView)
  13. })
  14. },
  15. })

logs.wxss

 

				
  1. .bright789_view_hide{
  2. display: none;
  3. }
  4. .bright789_view_show{
  5. display: block;
  6. }

从上面三个页面的文件可以很明显看出逻辑:logs.wxml的onChangeShowState按钮会在logs.js中触发一个事件,它会改变showView的值,而在logs.wxml中会根据showView的值确定画布canvas的class属性,而在logs.wxss中具体再设置两个class属性哪个是否显示



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23611.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询