当前位置:主页 > javascript教程 >

微信小程序实现动态显示和隐藏某个控件功能示例

发布:2023-01-18 10:53:20 90


为网友们分享了微信小程序相关的编程文章,网友劳梦蕾根据主题投稿了本篇教程内容,涉及到微信小程序、动态显示、隐藏、控件相关内容,已被403网友关注,涉猎到的知识点内容可以在下方电子书获得。

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

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

因为项目原本是需要将两个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" ></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属性哪个是否显示

上述代码运行效果如下:

微信小程序实现动态显示和隐藏某个控件功能示例

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


参考资料

相关文章

  • 微信小程序实现自定义modal弹窗封装教程

    发布:2020-01-16

    这篇文章主要介绍了小程序自定义modal弹窗封装实现方法,本文通过实例代码相结合的形式给大家介绍的非常详细,需要的朋友可以参考下


  • 微信小程序传值获取值的实例方法

    发布:2020-05-16

    这篇文章主要介绍了微信小程序传值以及获取值方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧


  • 微信小程序修改本地缓存key中单个数据的方法代码

    发布:2020-01-18

    这篇文章主要介绍了微信小程序如何修改本地缓存key中单个数据,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学


  • 微信小程序自定义导航栏的制作方法

    发布:2020-01-31

    这篇文章主要给大家介绍了关于微信小程序自定义导航栏的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用微信小程序具有一定的参考学习价值,需要的朋友们下面来一起学


  • 微信小程序通过gitee进行版本管理的实例

    发布:2020-04-26

    这篇文章主要介绍了微信小程序使用gitee进行版本管理,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • 微信小程序利用swiper+css实现购物车商品删除功能

    微信小程序利用swiper+css实现购物车商品删除功能

    发布:2022-07-07

    为网友们分享了关于微信小程序的教程,这篇文章主要介绍了微信小程序利用swiper+css实现购物车商品删除功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起


  • 微信小程序用户授权、位置授权及获取微信绑定手机号的实例分享

    发布:2020-03-30

    这篇文章主要介绍了信小程序用户授权、位置授权及获取微信绑定手机号,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下


  • 微信小程序录音文件格式silk遇到的问题及解决方法

    发布:2022-11-24

    为网友们分享了关于微信小程序的教程,录音文件为silk格式,说是silk其实是base64加密后的webm格式,只需将其转为webm格式即可。但是在处理过程中遇到各种坑,下面小编给大家带来了微信小程序录音文件格式silk遇到的问题及解决方法


网友讨论