vue界面刷新,vue如何实现局部刷新
这篇文章主要为大家详细介绍了某视频剪辑软件实现原生下拉刷新，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现原生下拉刷新的具体代码，供大家参考，具体内容如下
这是动画样式
文字样式
超文本标记语言代码
模板
div class=汽车箱
div class=汽车下拉刷新/div
div class= box @ touch start= fn start ref= Element
div class=con-txt 上拉刷新/div
/div
/div
/模板
射流研究…代码
脚本
导出默认值{
方法：{
fnstart(ev) {
这个. refs[ Element ]。风格。top=0；
this.scroolTop=
ev.changedTouches[0].佩吉-这个refs[Element].抵消
文档。ontouchmove=this。fnmove
文档。ontouchend=this。fnend
伊芙。防止默认ev。防止默认()；
},
fnmove(ev) {
伊芙。目标。父节点。儿童[0].innerHTML=下拉刷新；
这个T=ev.changedTouches[0]。佩吉-这个。scroot top
如果（本。标度0.12) {
这个. scale=1 -这个.t/200；
}否则{
这个. scale=0.12
}
这个. refs[ Element ]。风格。top=this .T * this.scale px
},
fnEnd(ev) {
伊芙。目标。父节点。儿童[0].innerHTML=正在刷新.；
document.ontouchmove=null
document.ontouchend=null
setTimeout(()={
这个. refs[ Element ]。风格。top=0；
这个. refs[ Element ]。风格。过渡=。3s缓解一切；
这个refs[Element].addevent侦听器( transitionend ，()={
这个. refs[ Element ]。风格。过渡=空；
});
}, 3000);
},
},
};
/脚本
钢性铸铁代码我这边用的是半导体色敏传感器
样式lang=scss 范围。方框{
文本对齐：居中；
高度：600像素
宽度：100vw
背景色：橙色；
位置：绝对；
左：0;
top:0；
}。汽车{
文本对齐：居中；
边距：自动；
宽度：199像素
高度：60px
行高：60px
背景-位置：0 0;
背景尺寸：100%自动；
动画：动画_汽车1.5s步骤(1)无限；
}
/风格
如果下拉刷新用动画就用这个钢性铸铁样式
图片的话我用的是28帧的根据100除以28 也就是3.5 ,所以每3.5%换一个图，就能形成一个逐帧动画，每一个页面的宽高都不一样所以要计算，我的页面的大小是1080的这个也时我设置好的宽高。
这是代码
样式lang=scss 范围。方框{
文本对齐：居中；
高度：600像素
宽度：100vw
背景色：橙色；
位置：绝对；
左：0;
top:0；
}。汽车{
文本对齐：居中；
边距：自动；
宽度：199像素
身高：134px
//边距-底部：200 px
背景：url(./assets/img/car.png )不重复；
背景-位置：0 0;
背景尺寸：100%自动；
动画：动画_汽车1.5s步骤(1)无限；
}
@关键帧动画_汽车{
0% {
背景-位置：0px
}
3.5% {
背景-位置：0px-134 px；
}
7% {
背景-位置：0px-268 px；
}
10.5% {
背景-位置：0px-402 px；
}
14% {
背景-位置：0px-536 px；
}
17.5% {
背景-位置：0px-670 px；
}
21% {
背景-位置：0px-804 px；
}
24.5% {
背景-位置：0px-938 px；
}
28% {
背景-位置：0px-1072 px；
}
31.5% {
背景-位置：0px-1206 px；
}
35% {
背景-位置：0px-1340 px；
}
38.5% {
背景-位置：0px-1474 px；
}
42% {
背景-位置：0px-1608 px；
}
45.5% {
背景-位置：0px-1742 px；
}
49% {
背景-位置：0px-1876 px；
}
52.5% {
背景-职位：0px-2010 px；
}
56% {
背景-位置：0px-2144 px；
}
59.5% {
背景-位置：0px-2278 px；
}
63% {
背景-位置：0px-2412 px；
}
66.5% {
背景-位置：0px-2546 px；
}
70% {
背景-位置：0px-2680 px；
}
73.5% {
背景-位置：0px-2814 px；
}
77% {
背景-位置：0px-2948 px；
}
80.5% {
背景-位置：0px-3082 px；
}
84% {
背景-位置：0px-3216 px；
}
87.5% {
背景-位置：0px-3350 px；
}
91% {
背景-位置：0px-3350 px；
}
94.5% {
背景-位置：0px-3484 px；
}
98% {
背景-位置：0px-3618 px；
}
}
/风格
图片
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。