關于animation和better-scroll遇到的問題

rollback 發布于2019-08-23 17:55 / 2319人閱讀

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

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

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

1、刷新按鈕添加旋轉動畫很簡單

@-webkit-keyframes rotate
{

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

}

animation:rotate 0.8s linear infinite;

這樣就可以實現按鈕的旋轉了

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

解決方案：

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

親測有效！

2、局部滾動better-scroll

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

說說遇到的問題：

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

針對這個問題：我想到的是，請求數據不在一進頁面而是點擊按鈕以后請求接口創建scroll對象并且在 this.$nextTick 里面創建

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

（2）上述那么做了以后會發現一個問題，每次顯示側邊欄就創建一個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();
     }
                    
})

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

GPU云服務器云服務器關于購買云主機和主機托管的常見問題布局遇到的問題學習遺傳算法遇到的問題關于購買云服務器和服務器托管的常見問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104359.html

vue better-scroll 遇到的坑

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

yiliang 2019-08-23 16:30 評論0 收藏0
BetterScroll：可能是目前最好用的移動端滾動插件

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

xiaolinbang 2019-08-21 17:45 評論0 收藏0
BetterScroll：可能是目前最好用的移動端滾動插件

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

layman 2019-08-01 18:05 評論0 收藏0