⼩程序uniapp实现左滑删除效果（完整代码）⼩程序uniapp实现左滑删除效果
实现效果
1，列表中侧滑删除
2，删除不同时存在
3，上下滑动与侧滑删除不影响
在本页⾯引⼊组件并使⽤ (⽂件在⽂章的最下⽅附上)
在需要左滑删除的地⽅使⽤
<view v-for="(item, index) in csListArrl" :key="index" :data-index="index">
<delSlideLeft :item="item" :data_transit="{ index: index, item: item }" @delItem="delItem">
<view class="editItem">列表展⽰内容</view>
</delSlideLeft>
</view>
//点击删除按钮事件
delItem(e) {
let that = this;
that.csListArrl.splice(e.data.index, 1);
},
引⼊组件⾥的两个⽂件
del_slideLeft.vue
<template>
<view>
<view class="box-slideLeft" >
<view class="touch-item touch-slideLeft " @touchstart="touchS" @touchmove="touchM" @touchend="touchE"  :>
<slot />
</view>
<view class="touch-item del-box-touch-slideLeft cf-shuCenter"  @click="delItem(item_show)">
<view class="iconfont icon-shanchu"></view>
</view>
</view>
</view>
</template>
<script>
export default {
components: {
},
props: {
data_transit: {
type: Object,
default () {
return {}
}
},
//可不传参
item: {
type: Object,
default () {
return {}
}
},
},
svg交互是什么computed: {
},
data() {
return {
item_show : {},
delBtnWidth: 60, //删除按钮宽度单位（rpx）
startX: '',
};
},
created:function(){
//专门处理检查对象中，某字段是否存在的，如果存在返回 true 不存在返回 false
let that = this ;
let item = that.item ;
if(!item.hasOwnProperty("txtStyle")){
this.$set(this.item,'txtStyle','');//不需要初始化了
}
this.item_show = this.item ;
},
watch: {
item(e){
this.item_show = e ;
},
},
methods: {
//点击删除按钮事件
delItem: function(e) {
let that = this;
let data ={
item : e ,
data : that.data_transit ,
};
this.$emit('delItem', data);
},
touchS: function(e) {
let that = this;
if (e.touches.length == 1) {
//设置触摸起始点⽔平⽅向位置
this.startX = e.touches[0].clientX
}
},
touchM: function(e) {
let that = this;
if (e.touches.length == 1) {
//⼿指移动时⽔平⽅向位置
var moveX = e.touches[0].clientX;
//⼿指起始点位置与移动期间的差值
var disX = this.startX - moveX;
var delBtnWidth = this.delBtnWidth;
var txtStyle = "";
if (disX == 0 || disX < 0) { //如果移动距离⼩于等于0，说明向右滑动，⽂本层位置不变      txtStyle = "left:0px";
} else if (disX > 0) { //移动距离⼤于0，⽂本层left值等于⼿指移动距离
txtStyle = "left:-" + disX + "px";
if (disX >= delBtnWidth) {
//控制⼿指移动距离最⼤值为删除按钮的宽度
txtStyle = "left:-" + delBtnWidth + "px";
}
}
//获取⼿指触摸的是哪⼀项
that.Style = txtStyle;
}
},
touchE: function(e) {
let that = this;
if (e.changedTouches.length == 1) {
//⼿指移动结束后⽔平位置
var endX = e.changedTouches[0].clientX;
//触摸开始与结束，⼿指移动的距离
var disX = this.startX - endX;
var delBtnWidth = this.delBtnWidth;
//如果距离⼩于删除按钮的1/2，不显⽰删除按钮
var txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "px" : "left:0px";
//获取⼿指触摸的是哪⼀项
that.Style = txtStyle;
}
},
}
}
</script>
<style lang="scss">
@import './iconfont.css';//便于有删除图标
.box-slideLeft {
view {
box-sizing: border-box;
}
position: relative;
overflow: hidden;
.touch-item {
position: absolute;
top: 0;
padding: 10px 10px 10px;
background-color: #FFFFFF;
// border-radius: 10px;
overflow: hidden;
}
.touch-slideLeft {
position: relative;
width: 100%;
z-index: 5;
transition: left 0.2s ease-in-out;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.
del-box-touch-slideLeft {
right: 0;
float: left;
width: 70px;
height: 100%;
line-height: 101px;
background-color: #EA5863;
border-radius: 0 10px 10px 0;
color: #fff;
font-size: 18px;
font-weight: lighter;
text-align: center;
}
.icon-shanchu{
font-size: 44upx;
}
.cf-shuCenter{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
</style>
iconfont.css
@font-face {font-family: "iconfont";
src: url('//at.alicdn/t/font_?t=1616746789802'); /* IE9 */
src: url('//at.alicdn/t/font_?t=1616746789802#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAB40AAsAAAAANxgAAB3kAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCLJArSEMEZATYCJAOBcAt6AAQgBYRtB4UzG14tZQRsHAAEyfdM9v/fEqgcrkM6HA8gHK6SOaU  url('//at.alicdn/t/font_1948714_o615zwc843k.woff?t=1616746789802') format('woff'),
url('//at.alicdn/t/font_f?t=1616746789802') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('//at.alicdn/t/font_1948714_o615zwc843k.svg?t=1616746789802#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-tishi:before {
content: "\e61b";
}
.icon-tishi1:before {
content: "\e65e";
}
.icon-zhanshi:before {
content: "\e6b3";
}
.icon-biaoqiankuozhan_shouye-321:before {
content: "\ebb2";
}
.icon-guanbi3:before {
content: "\e606";
}
.icon-guanbi1:before {
content: "\e61a";
}
.icon-shezhi1:before {
content: "\e617";
}
.icon-gengduo2:before {
content: "\e736";
}
.
icon-guanbi:before {
content: "\e613";
}
.icon-xiaoxi1:before {
content: "\e616";
}
.icon-sousuo1:before {
content: "\e66d";
}
.icon-shanchu:before {
content: "\e615";
}
.icon-more:before {
content: "\e60a";
}
.icon-shang3:before {
content: "\e689";
}
.icon-xia:before {
content: "\e65b";
}
.icon-kaiguan3:before {
content: "\e6da";
}
.icon-kaiguan4:before {
content: "\e6db";
}
.icon-xuanzhong:before {
content: "\e607";
}
.icon-weixuan:before {
content: "\e65d";
}
.
icon-time:before {
content: "\e619";
}
.icon-you:before {
content: "\e600";
}
.icon-shuazi:before {
content: "\e62a";
}
.icon-shuazi1:before {
content: "\e610";
}
.icon-baocun-tianchong:before {  content: "\e82b";
}
.icon-chehui:before {
content: "\e66b";
}
.icon-bianji-cuxiantiao-fill:before {  content: "\e69e";
}
.icon-qingkong:before {
content: "\e629";
}
.
icon-yanse:before {
content: "\e886";
}
.icon-beiwanglushili:before {
content: "\e612";
}
.icon-shijian:before {
content: "\e631";
}
.icon-icon-eye-open:before {
content: "\e60c";
}
.icon-icon-eye-close:before {
content: "\e60f";
}
.icon-icon-1:before {
content: "\e6e0";
}
.icon-jisuan:before {
content: "\e643";
}
.icon-tongji1:before {
content: "\e61d";
}
.icon-shezhi:before {
content: "\e654";
}
.icon-xiugai:before {
content: "\e698";
}
.icon-liebiao:before {
content: "\e611";
}
.
icon-add:before {
content: "\e604";
}
.icon-shenghuofuwu:before {
content: "\e681";
}
.icon-jingqu:before {
content: "\e61e";
}
.icon-dianhua:before {
content: "\e76a";
}
.icon-xiaoxi:before {
content: "\e79c";
}
.icon-zhoumomanmanzuo:before {  content: "\e7d5";
}
.icon-sousuo:before {
content: "\e62c";
}
.icon-collection-b:before {
content: "\e60d";
}
.icon-daohangdizhi:before {
content: "\e65f";
}
.icon-like-line:before {
content: "\e634";
}
.icon-like-s:before {
content: "\e635";
}
.icon-tubiaozhizuo-:before {
content: "\e605";
}
.icon-shoucang:before {
content: "\e6a7";
}
.icon-ziyuan1:before {
content: "\e618";
}
.icon-back:before {
content: "\e602";
}
.
icon-wode1:before {
content: "\e658";
}
.icon-fs-funding:before {
content: "\e60e";
}
.icon-home:before {
content: "\e63f";
}
.icon-gupiao:before {
content: "\e614";
}
.icon-xiangzuo:before {
content: "\e6b0";
}
.icon-xiangyou:before {
content: "\e65a";
}
到此这篇关于⼩程序uniapp实现左滑删除效果的⽂章就介绍到这了，更多相关⼩程序uniapp左滑删除内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。