微客导航 » 文章资讯 » vue移动端下拉刷新和上滑加载

vue移动端下拉刷新和上滑加载

2023-07-13 06:21:03 294

本文实例为大家分享了vue移动端下拉刷新和上滑加载的具体代码，供大家参考，具体内容如下

组件






.mu-load-more{
position:relative;
overflow:hidden;
}
.mu-refresh-control{
display:flex;
margin:0auto;
width:80px;
height:80px;
color:#2196f3;
align-items:center;
justify-content:center;
background-color:#FFF;
border-radius:50%;
-webkit-box-shadow:03px1px-2pxrgba(0,0,0,.2),02px2px0rgba(0,0,0,.14),01px5px0rgba(0,0,0,.12);
box-shadow:03px1px-2pxrgba(0,0,0,.2),02px2px0rgba(0,0,0,.14),01px5px0rgba(0,0,0,.12);
position:absolute;
left:50%;
margin-left:-38px;
margin-top:24px;
z-index:90;
}
.mu-refresh-svg-icon{
display:inline-block;
width:20px;
height:20px;
fill:currentColor;
}
.refresh{
-webkit-transform:rotate(360deg);
animation:rotation1slinearinfinite;
-moz-animation:rotation1slinearinfinite;
-webkit-animation:rotation1slinearinfinite;
-o-animation:rotation1slinearinfinite;
}
@-webkit-keyframesrotation{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
.son{
position:absolute;
animation:lightAni1slinear1;
}
@keyframeslightAni{
0%{
transform:translateY(0);
}
50%{
transform:translateY(-50px);
}
100%{
transform:translateY(-100px);
}
}

应用组件

refresh下拉刷新时调用的方法
load上滑加载时调用的方法

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

vue移动端下拉刷新和上滑加载

热门推荐

随机推荐