起步软件技术论坛
搜索
 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 3182|回复: 8

[处理中3] 设置组件隐藏后在加载时有延迟效果,能看到一瞬间

[复制链接]

97

主题

580

帖子

1359

积分

金牌会员

Rank: 6Rank: 6

积分
1359
QQ
发表于 2017-8-16 09:45:53 | 显示全部楼层 |阅读模式
给组件设置bind-visible后,如果是false,那么在页面加载完成后是没问题的,组件能完全隐藏,但问题是在页面加载的过程中还是会把组件显示出来,再隐藏掉,在安卓机上试的效果更明显一些,感觉就是先执行Onload事件再执行bind-visible事件,在bind-visible生效前能不能让组件就是隐藏的状态,别在屏幕上闪现一下,那效果确实有影响
传说中路过
发表于 2017-8-16 14:58:08 | 显示全部楼层
如果想隐藏不延时,只能在开发时设置标签的style属性!  控制隐藏!
然后通过js再控制 dom 节点 显示!

然后 再用 bind-visible  控制就可以了!!
qq:1912779713
WeX5教程--WeX5下载
回复 支持 反对

使用道具 举报

97

主题

580

帖子

1359

积分

金牌会员

Rank: 6Rank: 6

积分
1359
QQ
 楼主| 发表于 2017-8-16 15:27:15 | 显示全部楼层
本帖最后由 carbinechun 于 2017-8-16 15:30 编辑
liangyongfei 发表于 2017-8-16 14:58
如果想隐藏不延时,只能在开发时设置标签的style属性!  控制隐藏!
然后通过js再控制 dom 节点 显示!

然后通过js再控制 dom 节点 显示!——这里说的js控制dom节点显示是在什么事件中呢,onLoad事件中么???我这里说的隐藏举例来说就是用户权限,在登陆的时候就把权限都带过来了,根据权限有些菜单项不能显示,对应的组件就是隐藏效果了,不是需要单独的事件来触发,一般都是在onLoad的时候就需要这样了
传说中路过
回复 支持 反对

使用道具 举报

97

主题

580

帖子

1359

积分

金牌会员

Rank: 6Rank: 6

积分
1359
QQ
 楼主| 发表于 2017-8-16 16:31:21 | 显示全部楼层
本帖最后由 carbinechun 于 2017-8-16 17:15 编辑
liangyongfei 发表于 2017-8-16 14:58
如果想隐藏不延时,只能在开发时设置标签的style属性!  控制隐藏!
然后通过js再控制 dom 节点 显示!

具体说一下我的页面处理:
页面上有windowReceiver组件,接收上个页面传过来的参数,来确定是新增还是修改操作。在windowReceiver的Receive事件中来具体处理,修改的话对页面上的data组件进行查询后loaddata操作。页面上有保存按钮,如果是新增操作,那么显示保存按钮,如果是修改操作,不显示保存按钮(提交信息不让修改)。我在保存按钮的bind-visible属性里关联了函数bcBtnShow,函数里根据获取data组件的字段值来确定要不要显示保存(没值表示新增,有值表示修改)。————————以上是页面的信息,我在调试时发现,页面加载时对于按钮的bind-visible关联的函数bcBtnShow先调用了两次,然后进windowReceiver的Receive事件,然后再调用一次bcBtnShow,最后才确定保存按钮是否显示。我想问的是在windowReceiver的Receive事件前为什么调用了两次bcBtnShow呢?我根据你说的思路在组件上先设置visibility:hidden,然后在bcBtnShow函数中再根据条件来设置visibility:visible。就是因为在windowReceiver的Receive事件之前有两次调用的原因,按钮的隐藏效果还是被打乱了。。。。。我又试了在页面加个变量设置为false,在loadData的时候变成true来区分是新增还是修改,但这样的话在windowReceiver的Receive事件之后就不再调用bcBtnShow函数了,以前用data里的字段值来判断的时候是因为值有变化会触发bcBtnShow函数的么?不用data的来作判断就没法再次触发,两种方式都有矛盾之处。
传说中路过
回复 支持 反对

使用道具 举报

发表于 2017-8-16 18:00:53 | 显示全部楼层
carbinechun 发表于 2017-8-16 16:31
具体说一下我的页面处理:
页面上有windowReceiver组件,接收上个页面传过来的参数,来确定是新增还是修改 ...

先在style属性 中设置 隐藏!就可以保证默认不显示(不会闪)
然后onLoad时间中再将style中的数据去掉!

这个时候style属性就不生效了! 完全是bind-visible属性 起作用的!  通过控制ko对象  就可以了!
qq:1912779713
WeX5教程--WeX5下载
回复 支持 反对

使用道具 举报

97

主题

580

帖子

1359

积分

金牌会员

Rank: 6Rank: 6

积分
1359
QQ
 楼主| 发表于 2017-8-17 08:32:52 | 显示全部楼层
liangyongfei 发表于 2017-8-16 18:00
先在style属性 中设置 隐藏!就可以保证默认不显示(不会闪)
然后onLoad时间中再将style中的数据去掉!
...

如果按你说的,还是会出现闪的情况。因为涉及到加载顺序的问题。model onLoad事件、bind-visible事件、windowReceiver的Receive事件加载顺序会直接影响到按钮的闪现。
具体说一下我的页面处理:
页面上有windowReceiver组件,接收上个页面传过来的参数,来确定是新增还是修改操作。在windowReceiver的Receive事件中来具体处理,修改的话对页面上的data组件进行查询后loaddata操作。页面上有保存按钮,如果是新增操作,那么显示保存按钮,如果是修改操作,不显示保存按钮(提交信息不让修改)。我在保存按钮的bind-visible属性里关联了函数bcBtnShow,函数里根据获取data组件的字段值来确定要不要显示保存(没值表示新增,有值表示修改)。————————以上是页面的信息,我在调试时发现,页面加载时对于按钮的bind-visible关联的函数bcBtnShow先调用了两次,然后进windowReceiver的Receive事件,然后再调用一次bcBtnShow,最后才确定保存按钮是否显示。我想问的是在windowReceiver的Receive事件前为什么调用了两次bcBtnShow呢?我根据你说的思路在组件上先设置visibility:hidden,然后在bcBtnShow函数中再根据条件来设置visibility:visible。就是因为在windowReceiver的Receive事件之前有两次调用的原因,按钮的隐藏效果还是被打乱了。。。。。我又试了在页面加个变量设置为false,在loadData的时候变成true来区分是新增还是修改,但这样的话在windowReceiver的Receive事件之后就不再调用bcBtnShow函数了,以前用data里的字段值来判断的时候是因为值有变化会触发bcBtnShow函数的么?不用data的来作判断就没法再次触发,两种方式都有矛盾之处。
传说中路过
回复 支持 反对

使用道具 举报

发表于 2017-8-17 15:34:45 | 显示全部楼层
carbinechun 发表于 2017-8-17 08:32
如果按你说的,还是会出现闪的情况。因为涉及到加载顺序的问题。model onLoad事件、bind-visible事件、wi ...

首先  style 属性中控制隐藏,肯定是可以立刻生效不会闪的吧!
第一次需要显示的时候!通过js代码修改style属性! 让它显示!  或者动态删除style 属性

然后通过 bind-visible 控制显示隐藏!修改ko对象或data字段的值就可以了!  就可以动态感知的!

本地测试没问题
button源码
  1. <a component="$UI/system/components/justep/button/button" class="btn btn-default" label="button" xid="button2" style="visibility:hidden;" bind-visible="test">
  2.            <i xid="i2"></i>
  3.            <span xid="span2">
  4.            </span>
  5.    </a>
复制代码


js源码

  1. define(function(require){
  2.         var $ = require("jquery");
  3.         var justep = require("$UI/system/lib/justep");
  4.        
  5.         var Model = function(){
  6.                 this.callParent();
  7.                 this.test = justep.Bind.observable(false);
  8.         };

  9.         Model.prototype.button1Click = function(event){
  10.                 this.test.set(true);
  11.         };

  12.         Model.prototype.modelLoad = function(event){
  13.                 this.getElementByXid('button2').style.visibility='visible';
  14.         };

  15.         return Model;
  16. });
复制代码
qq:1912779713
WeX5教程--WeX5下载
回复 支持 反对

使用道具 举报

97

主题

580

帖子

1359

积分

金牌会员

Rank: 6Rank: 6

积分
1359
QQ
 楼主| 发表于 2017-8-17 15:44:13 | 显示全部楼层
liangyongfei 发表于 2017-8-17 15:34
首先  style 属性中控制隐藏,肯定是可以立刻生效不会闪的吧!
第一次需要显示的时候!通过js代码修改sty ...

版主你的代码忽略了一步,我是先获取上个页面传的参数进行data的loadData操作的,我都debugger看了一下,有个先后顺序,先model onLoad,然后有执行bind-visible关联的函数,然后会进windowReceiver的Receive事件,事件里有data的loadData操作。如果我的bind-visible关联的函数里面根据data字段值校验,那么会再次调用关联的函数;如果不用data字段值校验,那么就直接不走关联的函数了
传说中路过
回复 支持 反对

使用道具 举报

发表于 2017-8-17 18:04:15 | 显示全部楼层
carbinechun 发表于 2017-8-17 15:44
版主你的代码忽略了一步,我是先获取上个页面传的参数进行data的loadData操作的,我都debugger看了一下, ...

是的!只有KO 对象 或data字段 修改后,bind绑定才能重现触发的!
设置 style="visibility:hidden;"   以后!
可以在
bind-visible 绑定的js方法中执行

  1. this.getElementByXid('xid').style.visibility='visible';
复制代码


这样就可以了!
qq:1912779713
WeX5教程--WeX5下载
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|手机版|X3技术论坛|Justep Inc.    

GMT+8, 2025-7-8 13:29 , Processed in 0.056617 second(s), 23 queries .

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表