亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

關(guān)于animation和better-scroll遇到的問(wèn)題

rollback / 2378人閱讀

摘要：最近做了一個(gè)項(xiàng)目，不是蠻復(fù)雜，但是有些知識(shí)點(diǎn)可以分享下，先上圖因?yàn)榈南拗扑詧D片有點(diǎn)模糊，大家湊合著看哈，首先說(shuō)到這個(gè)刷新按鈕刷新按鈕添加旋轉(zhuǎn)動(dòng)畫(huà)很簡(jiǎn)單這樣就可以實(shí)現(xiàn)按鈕的旋轉(zhuǎn)了但接下來(lái)會(huì)有問(wèn)題旋轉(zhuǎn)的過(guò)程中其他的元素變得模糊還有還會(huì)引起

最近做了一個(gè)項(xiàng)目，不是蠻復(fù)雜，但是有些知識(shí)點(diǎn)可以分享下，先上圖

因?yàn)?M的限制 所以圖片有點(diǎn)模糊，大家湊合著看哈，首先說(shuō)到這個(gè)刷新按鈕

1、刷新按鈕 添加旋轉(zhuǎn)動(dòng)畫(huà)很簡(jiǎn)單

@-webkit-keyframes rotate
{

from {transform: rotate(0deg);}
to {transform: rotate(360deg);}

}

animation:rotate 0.8s linear infinite;

這樣就可以實(shí)現(xiàn) 按鈕的旋轉(zhuǎn)了

但接下來(lái)會(huì)有問(wèn)題：1、旋轉(zhuǎn)的過(guò)程中其他的元素變得模糊 2、還有還會(huì)引起父級(jí)的高度變化

解決方案：

transform:translate3d( 0, 0, 0);
z-index: 1;

親測(cè)有效！

2、局部滾動(dòng)better-scroll

用法API參考：http://ustbhuangyi.github.io/...

說(shuō)說(shuō)遇到的問(wèn)題：

（1）我的項(xiàng)目里面，點(diǎn)擊篩選按鈕，會(huì)有一個(gè)側(cè)邊欄的列表展示，所以我進(jìn)頁(yè)面就請(qǐng)求列表，生成篩選的列表，并創(chuàng)建了scroll 對(duì)象，問(wèn)題就是 當(dāng)我顯示和隱藏側(cè)邊欄的列表的時(shí)候，scroll因?yàn)閟crollerHeight丟失，而會(huì)出現(xiàn)卡頓前幾秒不滾動(dòng)的現(xiàn)象。

針對(duì)這個(gè)問(wèn)題：我想到的是，請(qǐng)求數(shù)據(jù)不在一進(jìn)頁(yè)面而是 點(diǎn)擊按鈕以后 請(qǐng)求接口 創(chuàng)建scroll對(duì)象并且在 this.$nextTick 里面創(chuàng)建

this.$nextTick(()=>{
    this.sideBarScroll = new BScroll("#sideBar_scroller",{
        scrollY: true,
        bounce:false,
        click: true
    });
});

（2）上述那么做了以后會(huì)發(fā)現(xiàn)一個(gè)問(wèn)題，每次顯示側(cè)邊欄就創(chuàng)建一個(gè)scroll對(duì)象 肯定是不行的，肉眼可以看到的問(wèn)題時(shí)就 會(huì)有多個(gè)滾動(dòng)條累計(jì)在一起 也就是生成了多個(gè)scroll對(duì)象

解決方案：

this.$nextTick(()=>{
    if(!this.sideBarScroll){
         this.sideBarScroll = new BScroll("#sideBar_scroller",{
             scrollY: true,
             scrollbar:{
                 fade:false,
                 interactive:false
             },
             bounce:false,
             click: true
        });
     }
     else{
          this.sideBarScroll.refresh();
     }
                    
})

好啦 先分享這么多，希望對(duì)大家有幫助！

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/104359.html

相關(guān)文章

  • vue better-scroll 遇到的坑

    摘要：先看效果介紹一個(gè)簡(jiǎn)單的靜態(tài)頁(yè)面主要是使用做橫向滾動(dòng)，點(diǎn)擊標(biāo)簽滾動(dòng)到相應(yīng)位置，以及滾到相應(yīng)位置后對(duì)應(yīng)標(biāo)簽顯示紅色。 先看效果 showImg(https://segmentfault.com/img/bVbqAdC?w=374&h=626); 介紹 一個(gè)簡(jiǎn)單的靜態(tài)頁(yè)面主要是使用 better-scroll 做橫向滾動(dòng)，點(diǎn)擊標(biāo)簽滾動(dòng)到相應(yīng)位置，以及滾到相應(yīng)位置后對(duì)應(yīng)標(biāo)簽顯示紅色。開(kāi)發(fā)過(guò)程中...

    yiliang 評(píng)論0 收藏0

  • BetterScroll：可能是目前最好用的移動(dòng)端滾動(dòng)插件

    摘要：是一款重點(diǎn)解決移動(dòng)端各種滾動(dòng)場(chǎng)景需求的開(kāi)源插件地址，有下列功能支持滾動(dòng)列表，下拉刷新，上拉刷新，輪播圖，等功能。為了滿足這些功能，通過(guò)使用慣性滾動(dòng)邊界回彈滾動(dòng)條淡入淡出來(lái)確保滾動(dòng)的流暢。貝瑟爾函數(shù)可以去看看，他讓動(dòng)畫(huà)不再那么突兀。 BetterScroll 是一款重點(diǎn)解決移動(dòng)端各種滾動(dòng)場(chǎng)景需求的開(kāi)源插件（GitHub地址），有下列功能支持滾動(dòng)列表，下拉刷新，上拉刷新，輪播圖，slide...

    xiaolinbang 評(píng)論0 收藏0

  • BetterScroll：可能是目前最好用的移動(dòng)端滾動(dòng)插件

    摘要：是一款重點(diǎn)解決移動(dòng)端各種滾動(dòng)場(chǎng)景需求的開(kāi)源插件地址，有下列功能支持滾動(dòng)列表，下拉刷新，上拉刷新，輪播圖，等功能。為了滿足這些功能，通過(guò)使用慣性滾動(dòng)邊界回彈滾動(dòng)條淡入淡出來(lái)確保滾動(dòng)的流暢。貝瑟爾函數(shù)可以去看看，他讓動(dòng)畫(huà)不再那么突兀。 BetterScroll 是一款重點(diǎn)解決移動(dòng)端各種滾動(dòng)場(chǎng)景需求的開(kāi)源插件（GitHub地址），有下列功能支持滾動(dòng)列表，下拉刷新，上拉刷新，輪播圖，slide...

    layman 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<