鍍金池/ 問(wèn)答/HTML/ weex中的Refresh組件:偶爾初次進(jìn)入頁(yè)面下拉刷新會(huì)跳動(dòng)一大段距離?

weex中的Refresh組件:偶爾初次進(jìn)入頁(yè)面下拉刷新會(huì)跳動(dòng)一大段距離?

問(wèn)題描述

圖片描述圖片描述

clipboard.png

如上三張圖所示,

  • 第一張是【還未刷新】的效果,即初始界面;
  • 第二張是【正常刷新】效果,白色區(qū)域隨著手指下拉而顯示,這里設(shè)置了margin值,小球是從navbar下來(lái)的。
  • 第三張圖是【非正常跳動(dòng)】效果,即初次進(jìn)入界面時(shí)準(zhǔn)備下拉刷新,但并未出現(xiàn)第二張的效果,而是猛然跳動(dòng)一大塊距離!令人費(fèi)解!

自己嘗試過(guò)哪些方法

起初筆者以為是因?yàn)樽约涸O(shè)置的margin、padding值對(duì)其的影響,但是發(fā)現(xiàn)去掉之后仍存在這張異常效果,而且在官方例子上加上margin、padding值顯示仍舊是正常的,故排除這張可能。

曾搜索有人稱之現(xiàn)象為“抖動(dòng)”,歸其原因?yàn)椤颁秩疚恢蒙形唇Y(jié)束“所致,故建議限制界面組件的寬高,這確實(shí)是個(gè)新的思路,但筆者界面中有的塊div寬高動(dòng)態(tài)決定的,且并不起作用。

希望各位猿猿們能提供相關(guān)解決問(wèn)題思路,跪求!

相關(guān)代碼

index.vue


<scroller show-scrollbar="false" >
             <refresh class="refresh" @refresh="onrefresh" :display="refreshing ? 'show' : 'hide'">
               <loading-indicator class="indicator"></loading-indicator>
            </refresh>
            <div class="block">
            ......
            <div class="color-block">
            </scroller>

index.css



.refresh {
    background: linear-gradient(to right, #CCB3AA , #E5D1BB);
    // padding-top: 44px;
    height: 69px;
    display: flex;
    align-items: center;
    &-indicator {
        margin-top: 44px;
        height: 25px;
        width: 25px;
        color: #CCB3AA;
    }
  }

.color-block{
    padding-top: 44px,;
    }
    
回答
編輯回答
嫑吢丕

這個(gè)問(wèn)題被我在官網(wǎng)上證實(shí)了,就是一個(gè)bug,解決辦法是換成list
https://blog.csdn.net/ITermen...

2018年7月8日 10:27