成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

rollback / 2324人閱讀

摘要:最近做了一個項目,不是蠻復(fù)雜,但是有些知識點可以分享下,先上圖因為的限制所以圖片有點模糊,大家湊合著看哈,首先說到這個刷新按鈕刷新按鈕添加旋轉(zhuǎn)動畫很簡單這樣就可以實現(xiàn)按鈕的旋轉(zhuǎn)了但接下來會有問題旋轉(zhuǎn)的過程中其他的元素變得模糊還有還會引起

最近做了一個項目,不是蠻復(fù)雜,但是有些知識點可以分享下,先上圖

因為4M的限制 所以圖片有點模糊,大家湊合著看哈,首先說到這個刷新按鈕

1、刷新按鈕 添加旋轉(zhuǎn)動畫很簡單

@-webkit-keyframes rotate
{

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

}

animation:rotate 0.8s linear infinite;

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

但接下來會有問題:1、旋轉(zhuǎn)的過程中其他的元素變得模糊 2、還有還會引起父級的高度變化

解決方案:

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

親測有效!

2、局部滾動better-scroll

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

說說遇到的問題:

(1)我的項目里面,點擊篩選按鈕,會有一個側(cè)邊欄的列表展示,所以我進頁面就請求列表,生成篩選的列表,并創(chuàng)建了scroll 對象,問題就是 當(dāng)我顯示和隱藏側(cè)邊欄的列表的時候,scroll因為scrollerHeight丟失,而會出現(xiàn)卡頓前幾秒不滾動的現(xiàn)象。

針對這個問題:我想到的是,請求數(shù)據(jù)不在一進頁面而是 點擊按鈕以后 請求接口 創(chuàng)建scroll對象并且在 this.$nextTick 里面創(chuàng)建

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

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

解決方案:

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();
     }
                    
})

好啦 先分享這么多,希望對大家有幫助!

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

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/104359.html

相關(guān)文章

  • vue better-scroll 遇到

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

    yiliang 評論0 收藏0
  • BetterScroll:可能是目前最好用移動端滾動插件

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

    xiaolinbang 評論0 收藏0
  • BetterScroll:可能是目前最好用移動端滾動插件

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

    layman 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<