vue自动刷新组件,vue 组件 slot
本文主要介绍了vue下拉刷新组件的开发以及slot使用的详细说明。本文通过示例代码为您详细介绍，对您的学习或工作有一定的参考价值。有需要的朋友可以参考一下。
“下拉刷新”和“上滑加载更多”的功能在前端项目中非常重要，尤其是在移动项目中。这里笔者从我之前做过的vue项目中的“眨眼”功能来讨论“下拉刷新”组件的开发：
正式开篇
在前端项目的components文件夹下新建一个pullRefreshView文件夹，新建一个component index.vue:(代表“整屏”，通过slot插入页面其他内容而不是传统的设置蒙版图层触发)
首先，您需要编写下拉刷新组件的模板。这里用的是slot，代码如下：
模板
div class= pullRefreshView @ touch move= touch move @ touch start= touch start @ touch end= touch end
div ref= circle icon class= circle-icon
div ref= circleIconInner class= circle-icon-inner /div
/div
插槽/插槽
/div
/模板
在上面的代码中，最外层使用一个div来包装，它被用作事件绑定的容器。同时，一个新的div。创建圆形图标的圆形图标。我们将这种图标样式设置在屏幕之外，以实现隐藏效果。代码如下：
风格。圆形图标{
位置：绝对；
左：0.625雷姆；
top:-1.875雷姆；
}。圆形-图标-内部{
宽度：1.5625雷姆；
身高：1.5625雷姆；
背景-图片：url(“圈图片地址”)；
背景-尺寸：封面；
}。圆形-旋转{
动画：颛顼. 8s线性无限；
}
@关键帧颛顼{
0%{}
25%{}
50%{}
75%{}
100%{}
}
/风格
刷新组件的UI基本写好了，接下来就是绑定事件了。通过上面的分析和我们上一章开发图片查看器的原理，我们需要使用移动端的touchstart、touchmove和touchend事件来实现下拉刷新的效果。
首先，收听touchstart事件：
touchstart(evt){
this . pull refresh . dragstart=evt . target touches[0]。客户
这个。$ refs . circle icon . style . webkittransition= none
},
在touchstart事件中，我们主要记录一些初始值，包括手指第一次接触屏幕时的位置，然后先隐藏圆形图标的动画效果。
然后，监听touchmove事件：
触摸移动(事件){
if(this . pull refresh . dragstart===null){
返回
}
let target=evt.targetTouches[0]
//上滑为正，下拉为负。
this . pull refresh . percentage=(this . pull refresh . dragstart-target . clienty)/window . screen . height
let scroll top=document . document element . scroll top document . body . scroll top
if(scrollTop===0){
//this.pullRefresh是指数据中的pullRefresh对象(下图)，evt是事件参数。
if(this . pull refresh . percentage 0 evt . cancelable){
evt.preventDefault()
this . pull refresh . joinrefresh flag=true
let translate y=-this . pull refresh . percentage * this . pull refresh . move count
if(math . ABS(this . pull refresh . percentage)=this . pull refresh . drag threshold){
让旋转=平移/30*360
这个。$ refs . circle icon . style . webkittransform= translate 3d(0 translate y px，0) rotate( rotate deg)
}
}否则{
if(this . pull refresh . joinrefresh flag===null){
this . pull refresh . joinrefresh flag=false
}
}
}否则{
if(this . pull refresh . joinrefresh flag===null){
this . pull refresh . joinrefresh flag=false
}
}
},
在touchmove事件中，我们主要做的是根据手指的移动量实时移动和旋转圆形图标。以下是一些确实需要解释的要点：
当页面位于屏幕顶部并且手指被向下拖动时，我们的下拉刷新触发。这两个条件缺一不可。代码中我们用scrollTop==0和this.pullRefresh.percentage 0来判断。
进入下拉刷新状态，此时手指一直向下拖动。第一，圆形icon.circleIcon会向下滚动旋转，当达到临界值时，只会原地旋转。
如果手指向上拖动，圆形图标将向上滚动并旋转。
直到手指离开屏幕，才触发下拉刷新，但圆形icon.circleIcon一直上下移动。
监听触摸端事件：
触摸端(evt){
if(this . pull refresh . percentage===0){
返回
}
if(math . ABS(this . pull refresh . percentage)this . pull refresh . drag threshold this . pull refresh . joinrefresh flag){
这个。$emit(onRefresh )
这个。$ refs . circleiconinner . class list . add( circle-rotate )
setTimeout(()={
这个。$ refs . circleiconinner . class list . remove( circle-rotate )
这个。$ refs . circle icon . style . webkittransition= 330 ms
这个。$ refs . circle icon . style . webkittransform= translate 3d(0，0，0) rotate(0deg)
},700)
}否则{
if(this . pull refresh . joinrefresh flag){
这个。$ refs . circle icon . style . webkittransition= 330 ms
这个。$ refs . circle icon . style . webkittransform= translate 3d(0，0，0) rotate(0deg)
}
}
this . pull refresh . joinrefresh flag=null
this . pull refresh . dragstart=null
this.pullRefresh.percentage=0
}
在touchend事件中，我们主要做一些动画操作。你可以看看代码中的注释。这里有一个描述：
此时手指离开屏幕，位移达到临界值，也有进入下拉刷新的标志位，表示正在触发刷新。此时圆形图标原地旋转，并触发下拉刷新回调方法，延迟700ms后收起。
当我们实现圆形图标的旋转和位移动画时，我们使用两个div。我们在touchmove的时候，主要是对外DIV进行移位和旋转，也就是ref=circleIcon。
在touchend中，我们主要是在内部div中加入动画，即ref=circleIconInner。因为我们不能对一个div同时使用位移旋转和动画，这里有个技巧就是为父元素设置位移和旋转，当没有设置CSS动画样式时，它的子元素会随父元素一起生效。
最后，我们来看看[数据]里有什么：
data(){
返回{
pullRefresh:{
DragStart:null，//开始抓取标志位
百分比：0，//拖动量(百分比)
DragThreshold:0.3，//临界值
Move: 200，//位移系数，可以调整圆形图片图标的移动速率
JoinRefreshFlag:null，//进入刷新状态的标志位(true)
}
}
},
添加：插槽
为什么模板里有槽？
插槽有三种形式：
普通插槽
命名插槽
范围插槽
也许我们通常使用电器的名称槽，但第一个也特别容易使用。3354只是因为它没有名字，所以包装在另一个组件中引用这个组件的所有东西都属于这个槽：
假设my-component组件中有以下模板：
差异
H2我是子组件/h2
Slot这句话只有在没有内容分发/slot的情况下才会出现
/div
父组件模板：
差异
H1这是父集合地点/h1。
我的组件
p这是一些初始内容/p
p这是更多内容/p
/我的组件
/div
最后会被渲染成这样：
差异
H1这是父集合地点/h1。
差异
H2我是子组件/h2
p这是一些初始内容/p
p这是更多内容/p
/div
/div
所以我在这里做的是让“下拉动画”在调入“父组件”时更加自然，但不会增加一个文件的负担。
关于vue下拉刷新组件的开发和slot使用的详细说明这篇文章到此为止。关于使用vue下拉刷新组件插槽的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。