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

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

  • 更新时间：2023-01-18 10:53:20
  • 编辑：乔元凯
给大家整理一篇微信小程序相关的编程文章，网友曹翰池根据主题投稿了本篇教程内容，涉及到微信小程序、动态显示、隐藏、控件相关内容，已被570网友关注，涉猎到的知识点内容可以在下方电子书获得。

参考资料

正文内容

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

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

因为项目原本是需要将两个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弹窗封装教程

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

    发布时间：2020-01-16

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

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

    发布时间：2020-05-16

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

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

    发布时间：2020-01-18

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

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

    发布时间：2020-01-31

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

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

    发布时间：2020-04-26

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

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

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

    发布时间：2022-07-07

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

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

    发布时间：2020-03-30

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

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

    发布时间：2022-11-24

  • 微信小程序开发从入门到项目实践

    微信小程序开发从入门到项目实践

    780套求职资源库、200个实例及源代码注释、5套电子书资源库、200道求职常见面试（笔试）真题与解析，同步微视频+海量资源+教学课件+上机实训手册+在线答疑+编程代码纠错器。 内容简介 《微信小程序开发从入门到项目实践》采取基础知识核心应用高级应用项目实践的结构和由浅入深，由深到精的学习模式进行讲解。全书共13章。首先讲解微信小程序的发展历程、小程序账号注册以及项目的创建；然后通过对原生组件、视图容器组件、表单组件等小程序

    大小：71.4 MB小程序开发

  • 微信小程序：分享微信创业2.0时代千亿红利

    微信小程序：分享微信创业2.0时代千亿红利

    小程序是一个新的概念，给创业者、投资者、程序员带来了福音。小程序是互联网创业的新方向，是投资机构的热门话题，也为程序员降低了工作强度。面对这一热点，很多人想投身其中，但

    大小：4.26 MB微信小程序电子书

  • 微信公众平台与小程序开发：从零搭建整套系统

    微信公众平台与小程序开发：从零搭建整套系统

    本书从逻辑上可以分为三大部分. 第1部分为第1章至第5章，主要介绍微信公众平台开发相关的基础理论知识，包括开发环境和开发框架搭建，常用调试工具使用详解等。这几章可以帮助读者了解公众号开发的背景知识，为后续的章节阅读打下基础。

    大小：72 MB小程序开发电子书

  • MPX 1.x 微信小程序框架手册

    MPX 1.x 微信小程序框架手册

    Mpx是一款致力于提高小程序开发体验的增强型小程序框架，通过Mpx，我们能够最先进的web开发体验(Vue + Webpack)来开发生产性能深度优化的小程序，Mpx具有以下一些优秀特性： 数据响应特性(watch/computed) 增强的模板语法(动态组件/样式绑定/类名绑定/内联事件函数/双向绑定等) 深度性能优化(原生自定义组件/基于依赖收集和数据变化的setData) Webpack编译(npm/循环依赖/Babel/ESLint/css预编译/代码优化等) 单文件组件开发 状态管理(Vuex规

    大小：1.75 MB微信小程序

用户留言

发布评论

最新更新

热门推荐