• 樣子

  
  
  demo.png
• 核心代碼

on: {

      touchStart(){

                // 上下滾動(dòng)結(jié)束前不能左右切換滑塊

               this.allowTouchMove = event.cancelable; 
       },
            
       touchMove(){
                
             // console.log(this.progress);
                
             // 1.875的由來(lái), 100vw是750, 25%的寬就是 1.875rem;
                
             $('header .barwrap').css({left: 1.875* this.progress* 3 + 'rem'});
         },
            
         transitionStart(){
                
             // console.log(this.activeIndex);
                    
             $('header .barwrap').animate({left: 1.875* this.activeIndex + 'rem'}, 200);       
     }           
 }
  

• 手動(dòng)觸摸切換swiper時(shí)，有兩個(gè)階段，觸摸滑動(dòng)，觸摸釋放，分別對(duì)應(yīng)touchMove和transitionStart

• 一般情況下導(dǎo)航下的小條（此例中大廳下的紅色小條）寬度不一定和導(dǎo)航元素大小一致，所以可以將小條放到一個(gè)包裹wrap里面，通過(guò)改變barwrap的位置來(lái)實(shí)現(xiàn)小條移動(dòng)

<div class="barwrap">
            
    <div class="bar"></div>
</div>

• 獲取 git clone
  https://github.com/hug-love/swiper-demo.git
  git@github.com:hug-love/swiper-demo.git

• 文章有參考某知名生鮮電商APP demo 該demo是swiper官網(wǎng)移動(dòng)端應(yīng)用里的一篇

  image.png

• other
  git 從版本庫(kù)中移除已添加的文件夾 git rm -r --cached dist， 本地不刪除
  參考 git忽略已加入到版本庫(kù)的文件

• other 2

mint-ui Spiner里的snake實(shí)現(xiàn)

image.png

 @keyframes roll{
        from{transform: rotate(0deg);}
        to{transform: rotate(360deg);}
    }
    
    .box{
        
        width: 100px;
        
        height: 100px;
        
        border: 5px solid orangered;
        
        border-radius: 50%;
        
        border-left-color: transparent;
        
        animation: roll 1.5s linear infinite;
    }

<div class="box"></div>

圓角+邊框+一側(cè)透明邊框顏色

雪白