用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

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

纸飞机 2018-3-6 16:10

作者:萌神哆啦A梦,来自原文地址 在的开发过程中,经常需要用到隐藏某个控件这种情况。因为项目原本是需要将两个canvas切换,但是小程序的canvas支持的功能实在是少,本来就jQuery mobile或者将canvas转为图片就可 ...

作者:萌神哆啦A梦,来自

原文地址


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

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

实现方法:

logs.wxml

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

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属性哪个是否显示

鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏