-
样子
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>
圆角+边框+一侧透明边框颜色
雪白
网友评论