vue移动端左右滑动插件,移动端左滑动删除
vue。j是现在流行的射流研究…框架之一，vue是一套用于构建用户界面的渐进式爪哇岛描述语言框架，这篇文章主要给大家介绍了关于某视频剪辑软件移动端实现左滑编辑与删除的相关资料，需要的朋友可以参考下
前言
根据项目需要使用某视频剪辑软件触摸实现了一个某视频剪辑软件移动端的左滑编辑和删除功能，废话不多说，先看效果图，然后上代码吧！
方法如下：
第一步：安装某视频剪辑软件触摸
新公共管理安装vue-touch@next - save
第二步：main.js中引入
从“触摸”导入VueTouch
Vue.use(VueTouch，{
名称："虚拟触摸"
});
第三步：使用（用虚拟触摸包住你要左滑删除的内容)
div class=wrap
虚拟触摸
style=margin-bottom:10px
v-on:panstart=onPanStart(key)
v-on:panmove=onPanMove
v-on:panend=onPanEnd
列表中的v-for=(item，key)
:key=key
！-下面差异这一块是我页面需要左滑删除的项目内容，你可以替换成你自己的-
div class= item df _ sb item-p :style= activeId===key？滑动：
左-img
img :src=item.image_url alt
/p
URL v-if= item。redirect _ URL！= {{item.redirect_url}}/p
除此之外无/p
p class= city { item。城市} }/p
edit-delete df _ sad :ref= editBtn key
div class= edit @ click= edit fun( edit ，item.id，item.image_url，item.redirect_url)
img src=././资产/图片/顾问/IC _秀改。巴布亚新几内亚语
/div
p class=edit-line/p
div class= ad-delete @ click= delete fun(key，item.id)
img src=././资产/图片/顾问/IC _山初。巴布亚新几内亚语
/div
/div
/div
/v触摸
/div
第四步：定义变量，以及方法，下面代码可直接拷贝，将不需要的删除换成自己的，需要的留着就行
脚本
从导入httpApi././http/http API ；
导出默认值{
名称： ,
data() {
返回{
滑动： ,//滑动的样式
wd: 0，//编辑和删除按钮的宽度之和
swipeWd: 0，//已经滑动的距离
activeId: ，//实际是上一次的活动编号
//以上四个变量必须保留，下面的三个可以删除
第一页，
尺码：10,
列表：[]
};
},
方法：{
//请求列表数据
getList($state) {
let params=new URLSearchParams()；
params.append(page ，this。页面)；
params.append(size ，this。尺寸)；
这个post(httpApi .BANNERLIST，params)。然后(res={
if (res.code==10000) {
if (res.data) {
这个。列表=这个。列表。concat(RES . data。列表)；
这个页面
if (res.data.list.length===10) {
$州。loaded()；
}否则{
$州。完成()；
}
}否则{
$州。完成()；
}
}否则{
$州。完成()；
}
})。接住(错误={
控制台。日志(错误)；
});
},
//编辑
editFun(类型，图像id，图像，网址){
这个. router.push({
路径："/issueAdvertising "，
});
},
//删除
deleteFun(index，image_id) {
这个。activeid=//将上一次的活动编号制空
let params=new URLSearchParams()；
params.append(agent_id ，this。id)；
params.append(image_id ，image _ id)；
这个post(httpApi .删除横幅，参数)。然后(res={
if (res.code==10000) {
//虽然请求删除接口删除了列表其中的某一项内容，但是页面上还有
//因此需要在本地数组中也删除，这样才完美，下面这行代码比较重要，可以写在你删除接口成功后的地方
this.list.splice(索引，1);
this.modal.toastFun(删除成功);
} else if (res.code==20000) {
这个。模态的。祝酒乐(RES . message)；
}
})。catch(err={ })；
},
//以下三个方法全部拷贝，无需修改
//滑动位置
onPanStart(id) {
事件。防止默认()；
//获取右侧按钮宽度
let str= editBtn id
this.wd=1.2 * this .$refs[str][0].偏移距离
//初始化
if (this.activeId！=id) {
这个。swipe= transform:translate x(0px)；
这个。刷卡wd=0；
}
this.activeId=id
},
//滑动位置
onPanMove(事件){
事件。防止默认()；
设deltaX=event.deltaX
//组件向左移动直到最大距离
if (deltaX 0 deltaX -this.wd) {
//向左滑动
这个。swipe= transform:translate x( deltaX px)；
this.swipeWd=deltaX
}
if(deltaX 0 deltaX=this。wd这个。刷卡wd 0){
//向右滑动
设wx=deltaX this.swipeWd
这个。swipe= transform:translate x( wx px)；
}
},
//结束位置
在暂停（事件){
事件。防止默认()；
//判断向左移动的距离是否大于二分之一
设deltaX=event.deltaX
if (deltaX 0) {
if (deltaX=-this.wd/2) {
//向左滑动超过二分之一
这个。swipe= transform:translate x(-this。wd px)；
这个。刷wd=-这个。wd；
}否则{
这个。swipe= transform:translate x(0px)；
这个。刷卡wd=0；
}
}否则{
如果(这个。刷卡wd 0 deltaX=这个。wd/2){
//向左滑动超过二分之一
这个。swipe= transform:translate x(0px)；
这个。刷卡wd=0；
}否则{
这个。swipe= transform:translate x( this。刷卡wd px)；
}
}
}
},
};
/脚本
风格
我只贴出了上面代码的钢性铸铁样式，根据需求自行删减吧，有需要的留着，不需要的删除，需要改变的自行修改。换行{
宽度：100%;
身高：100%;
溢出：隐藏；
}。项目{
左填充：40px
高度：120像素
背景：# ffffff
对齐-项目：居中；
伸缩方向：继承；左侧-图像{
宽度：120像素
高度：100像素
溢出：隐藏；
img {
最小宽度：120像素；
高度：100像素
}
}
}。url {
宽度：400像素
填充：10px 30px 0；
框大小：边框-框；
自动换行：断字；
文本对齐：居中；
溢出：隐藏；
文本溢出：省略号；
空白：nowrap
}。城市{
文本对齐：居中；
最小宽度：100像素；
}。项目-p {
颜色：# 333333;
字体大小：22px
}。没有
颜色：# 999999;
}。提示{
高度：40px
对齐-项目：居中；
边距-底部：30px
}。行{
宽度：250像素
高度：1px
背景：# 999999;
不透明度：0.5;
}。项目{
宽度：120%;//超过100%
转场：0.1秒缓0s；//过渡效果
}。编辑-行{
宽度：2px
高度：80px
背景：rgba(255，255，255，1)；
}。编辑-删除{
宽度：160像素
身高：100%;
背景：rgba(255，126，34，1)；
不透明度：0.8;
对齐-项目：居中；
}。编辑，表示“往”删除{
img {
宽度：42px
高度：42px
}
}。add-btn {
宽度：200像素
高度：80px
背景：rgba(255，126，34，1)；
box-shadow:0px 0px 5px 0px rgba(221，221，236，1)；
边框半径：40px
文本对齐：居中；
行高：80px
颜色：# ffffff
字体大小：30px
位置：固定；
底部：8%;
左：50%;
transform:平移x(-50%)；
}
总结
有需要的拿走根据自己的需求稍做修改即可，写的很详细，到此这篇关于某视频剪辑软件移动端实现左滑编辑与删除的全过程的文章就介绍到这了，更多相关某视频剪辑软件左滑编辑与删除内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。