设置组件隐藏后在加载时有延迟效果，能看到一瞬间

carbinechun

给组件设置bind-visible后，如果是false，那么在页面加载完成后是没问题的，组件能完全隐藏，但问题是在页面加载的过程中还是会把组件显示出来，再隐藏掉，在安卓机上试的效果更明显一些，感觉就是先执行Onload事件再执行bind-visible事件，在bind-visible生效前能不能让组件就是隐藏的状态，别在屏幕上闪现一下，那效果确实有影响

liangyongfei

如果想隐藏不延时，只能在开发时设置标签的style属性！  控制隐藏！
然后通过js再控制 dom 节点 显示！

然后 再用 bind-visible  控制就可以了！！

carbinechun

liangyongfei 发表于 2017-8-16 14:58
如果想隐藏不延时，只能在开发时设置标签的style属性！  控制隐藏！
然后通过js再控制 dom 节点 显示！

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

carbinechun

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的来作判断就没法再次触发，两种方式都有矛盾之处。

liangyongfei

carbinechun 发表于 2017-8-16 16:31
具体说一下我的页面处理：
页面上有windowReceiver组件，接收上个页面传过来的参数，来确定是新增还是修改 ...

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

这个时候style属性就不生效了！ 完全是bind-visible属性 起作用的！  通过控制ko对象  就可以了！

carbinechun

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的来作判断就没法再次触发，两种方式都有矛盾之处。

liangyongfei

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. 
   
10.         Model.prototype.button1Click = function(event){
    
11.                 this.test.set(true);
    
12.         };
    
13. 
    
14.         Model.prototype.modelLoad = function(event){
    
15.                 this.getElementByXid('button2').style.visibility='visible';
    
16.         };
    
17. 
    
18.         return Model;
    
19. });

复制代码

carbinechun

liangyongfei 发表于 2017-8-17 15:34
首先  style 属性中控制隐藏，肯定是可以立刻生效不会闪的吧！
第一次需要显示的时候！通过js代码修改sty ...

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

liangyongfei

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';

复制代码

这样就可以了！