效果图
附带一个视频转gif的网站,free且clean!强推!良心网站~~~i了i了
https://www.aconvert.com/cn/video/mp4-to-gif/
- VUE框架
- H5项目的移动端
- vant组件库(拖拽功能跟组件库没有关系hhO(∩_∩)O哈哈~)
- 用到触摸事件触touchstart、touchmove
- 如果需要可拖动按钮松开之后靠边、隐藏之类的效果,用触摸事件touchend,项目中没有用到我就没写(▽)
<template>
<div class="box">
<van-nav-bar
title="列表"
left-arrow
@click-left="$router.back()"
safe-area-inset-top
/>
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<van-cell v-for="item in list" :key="item" :title="item" />
</van-list>
<div>
<img
ref="moving"
@touchmove="drag('moving',$event)"
@touchstart="touchStartHandle('moving',$event)"
src="../assets/img/up.png"
alt=""
class="gotop"
@click="goTop()"
>
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [],
loading: false,
finished: false,
coordinate:{
client:{},
elePosition:{}
}
};
},
methods: {
onLoad() {
// 异步更新数据
// setTimeout 仅做示例,真实场景中一般为 ajax 请求
setTimeout(() => {
for (let i = 0; i < 10; i++) {
this.list.push(this.list.length + 1);
}
// 加载状态结束
this.loading = false;
// 数据全部加载完成
if (this.list.length >= 40) {
this.finished = true;
}
}, 1000);
},
touchStartHandle(refName,e){
let element = e.targetTouches[0]
// 记录点击的坐标
this.coordinate.client = {
x:element.clientX,
y:element.clientY
}
// 记录需要移动的元素坐标
this.coordinate.elePosition.left = this.$refs[refName].offsetLeft
this.coordinate.elePosition.top = this.$refs[refName].offsetTop
},
drag(refName,e) {
let element = e.targetTouches[0]
// 根据初始client位置计算移动距离(元素移动位置+光标移动后的位置-光标点击时的初始位置)
let x = this.coordinate.elePosition.left +(element.clientX - this.coordinate.client.x)
let y = this.coordinate.elePosition.top +(element.clientY - this.coordinate.client.y)
// 限制可移动距离,不超出可视区域
x= x<=0 ? 0 : x>=innerWidth-this.$refs[refName].offsetWidth ? innerWidth - this.$refs[refName].offsetWidth : x
// 50是头部的高度
y= y<=50 ? 50 : x>=innerHeight-this.$refs[refName].offsetHeight ? innerHeight - this.$refs[refName].offsetHeight : y
// 移动当前元素
this.$refs[refName].style.left = x + 'px'
this.$refs[refName].style.top = y + 'px'
},
/**
* 返回顶部
*/
goTop() {
document.getElementsByClassName('box')[0].scrollTop = 0
}
}
}
</script>
<style scoped>
.box {
height:100vh;
overflow:scroll;
}
.gotop {
position:absolute;
top:90vh;
left:320px;
}
</style>
附带一个电脑端制作gif的完整教程:https://blog.csdn.net/cy1502/article/details/122212239?spm=1001.2014.3001.5502