swiper tab标签页带小条的简单实现

• 样子

  
  demo.png
• 核心代码

on: {

      touchStart(){

                // 上下滚动结束前不能左右切换滑块

               this.allowTouchMove = event.cancelable; 
       },
            
       touchMove(){
                
             // console.log(this.progress);
                
             // 1.875的由来, 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);       
     }           
 }
  

• 手动触摸切换swiper时，有两个阶段，触摸滑动，触摸释放，分别对应touchMove和transitionStart

• 一般情况下导航下的小条（此例中大厅下的红色小条）宽度不一定和导航元素大小一致，所以可以将小条放到一个包裹wrap里面，通过改变barwrap的位置来实现小条移动

<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官网移动端应用里的一篇

  image.png

• other
  git 从版本库中移除已添加的文件夹 git rm -r --cached dist， 本地不删除
  参考 git忽略已加入到版本库的文件

• other 2

mint-ui Spiner里的snake实现

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>

圆角+边框+一侧透明边框颜色