最近做了一個項目,不是蠻複雜,但是有些知識點可以分享下,先上圖
因爲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();
}
})
好啦 先分享這麼多,希望對大家有幫助!