vue强制刷新当前组件,vue 上拉加载
这篇文章主要为大家详细介绍了基于某视频剪辑软件封装下拉刷新上拉加载组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基于某视频剪辑软件和原生爪哇岛描述语言封装的下拉刷新上拉加载组件，供大家参考，具体内容如下
上升插槽是下拉刷新的自定义内容放的地方
向下倾斜插槽是上拉加载的自定义内容放的地方
默认插槽为列表内容区域
组件代码如下
模板
div class=刷新id=刷新
插槽名称= upTilte /插槽
插槽/插槽
插槽名称=向下倾斜/插槽
/div
/模板
脚本
导出默认值{
名称： PullupOrPulldownRefresh ，
道具：{
//最大移动距离
最大移动：{
类型：数量，
默认值：300
},
//阻尼系数
摩擦力：{
类型：数量，
默认值：0.3
}
},
data() {
返回{
startY: 0，
ul:空，
draw: null，
up: null，
向下：空，
y: 0 //惯性回弹的距离
}
},
已安装(){
这个. nextTick(()={
这个。draw=文档。getelementbyid(刷新)
this.ul=this.draw .孩子们
this.up=this.draw.children[0]
孩子们
这个。画吧。addevent监听器( touch start ，this.touchstart)
这个。画吧。addevent侦听器( touch move ，this.touchmoveEvent)
这个。画吧。addevent侦听器( touch end ，this.touchendEvent)
})
},
方法：{
//触摸开始事件
触摸开始(事件){
这个。starty=事件。已更改触摸[0].客户
},
//触摸移动事件
触摸移动事件(事件){
常量高度=this。ul。客户身高-这个。画吧。客户身高
如果(身高===这个。画吧。滚动顶部 这个。画吧。scroll top===0){
var a=event.changedTouches[0].客户-这。开始
this.y=a=this.maxMove？答：this.maxMove
//为了清除卡顿问题，需要清除过渡效果
this.ul.style.transition=无
这个。ul。风格。transform= translate y( this。摩擦力*这个。y px)
//修改状态
构造高度=-这个。向上。客户身高这个。摩擦力*这个。y
//下拉开始
如果(这个。摩擦力*这个。y 0)(这个。设置状态(这。摩擦力*这个。y)，this.up.style.transition=none ，这个。向上。风格。transform= translate y( up height px)translate x(-50%))
//上拉开始
如果(这个。摩擦力*这个。y 0)(这个。设置状态(这。摩擦力*这个。y)，这个。下去。风格。过渡=无，这个。下去。风格。页边距top=this。摩擦力*这个。y px )
}
},
//触摸结束事件
触摸事件(事件){
如果(this.friction * this.y=50)这个. emit(RefreshUp ，this.friction * this.y)
else if(这个。摩擦力*这个。y-50)这个.$emit(RefreshDown ，this.friction * this.y)
else this.resetStyle()
},
//重置并且添加过渡效果
resetStyle() {
这个。ul。风格。transition=转换。6s
这个。ul。风格。transform= translate y( 0 px)
这个。向上。风格。transition= all。6s
这个。向上。风格。transform= translate y(- this。向上。客户高度 px)平移x(-50%)
这个。下去。风格。transition= all。6s
这个。下去。风格。页边距top=-this。下去。客户端高度像素
},
//设置刷新状态
setStatus(y) {
这个发出( setStatus ，y)
}
}
}
/脚本
样式lang=scss 。刷新{
宽度：100%;
身高：100vh
边框：2px纯色# ccc
位置：相对；
溢出：隐藏；
溢出：自动；
位置：固定；
ul {
缩放：1;
填充：0 10%;
}
ul:在{
内容："";
显示：块；
可见性：隐藏；
高度：0;
明确：两者都有；
}
李{
列表样式：无；
宽度：100%;
高度：50px
行高：50px
文本对齐：居中；
}。向上刷新{
位置：绝对；
左：50%;
transform:平移x(-50%)；
z指数：-9;
}。向下刷新{
位置：相对；
左：50%;
transform:平移x(-50%)；
页边距-顶部：-10px；
z指数：-9;
}
}
/风格
组件的使用方法
摩擦为摩擦系数
@RefreshUp为下拉到一定距离触发事件
@新鲜出炉为上拉到一定距离触发事件
@setStatus为更改刷新状态的方法
模板
差异
PullupOrPulldownRefresh
ref= PullupOrPulldownRefresh
:maxMove=maxMove
：摩擦力=摩擦力
@RefreshUp=RefreshUp
@RefreshDown=RefreshDown
@setStatus=setStatus
模板v型槽：上升
！-div class= up refresh v-show= isUpRefresh { { up title } }/div-
div class= UpRefresh v-show= isUpRefresh
img:src= require( @/assets/logo。png ) alt= /
p{{ Uptitle }}/p
/div
/模板
保险商实验所
里
v-for=(item，index) in data
:key=index
style=背景：橙色
{{ item }}
/李
/ul
模板v形槽：向下倾斜
div class= down refresh v-show=是down refresh"{ down title } }/div
/模板
/pullporpulldownresh
/div
/模板
脚本
导出默认值{
data() {
返回{
maxMove: 300，
摩擦力：0.3,
数据：[1,2,3,4,5,6,7,8,9,10],
isUpRefresh: false，
isdownresh:false，
标题是上拉加载更多，
Uptitle:下拉刷新
}
},
方法：{
setStatus(y) {
如果(y y 0) {
this.isUpRefresh=true
这个. Uptitle=下拉刷新
如果(y=50)这个. Uptitle=松手刷新
返回
}
this.isDownRefresh=true
这个. Downtitle=上拉加载更多
如果(y=-50)这个. Downtitle=松手加载更多
},
刷新(y) {
如果(!y)返回
如果(y=50) {
这个. Uptitle=正在刷新
setTimeout(()={
for(var I=1；i=10i ) {
这个。数据。推(这个。数据【这个。数据。长度- 1] 1)
}
这个。$参考文献pullporpulldownrefresh。重置样式()//回弹重置
}, 1000)
}
},
RefreshDown(y) {
如果(!y)返回
if (y=-50) {
这个. Downtitle=正在加载
setTimeout(()={
for(var I=1；i=10i ) {
这个。数据。推(这个。数据【这个。数据。长度- 1] 1)
}
这个。$参考文献pullporpulldownrefresh。重置样式()//回弹重置
}, 1000)
}
}
}
}
/脚本
样式范围的语言=scss 。刷新图像{
宽度：30px
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。