微信小程序uniapp实现左滑删除效果（完整代码）

微信⼩程序uniapp实现左滑删除效果

实现效果

1，列表中侧滑删除2，删除不同时存在

3，上下滑动与侧滑删除不影响

在本页⾯引⼊组件并使⽤ (⽂件在⽂章的最下⽅附上)

在需要左滑删除的地⽅使⽤

列表展⽰内容

//点击删除按钮事件 delItem(e) { let that = this;

that.csListArrl.splice(e.data.index, 1); },

引⼊组件⾥的两个⽂件

del_slideLeft.vue

iconfont.css

@font-face {font-family: \"iconfont\";

src: url('//at.alicdn.com/t/font_1948714_o615zwc843k.eot?t=16167467802'); /* IE9 */

src: url('//at.alicdn.com/t/font_1948714_o615zwc843k.eot?t=16167467802#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('data:application/x-font-woff2;charset=utf-8;base,d09GMgABAAAAAB40AAsAAAAANxgAAB3kAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCLJArSEMEZATYCJAOBcAt6AAQgBYRtB4UzG14tZQRsHAAEyfdM9v/fEqgcrkM6HA8gHK6SOaU url('//at.alicdn.com/t/font_1948714_o615zwc843k.woff?t=16167467802') format('woff'),

url('//at.alicdn.com/t/font_1948714_o615zwc843k.ttf?t=16167467802') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('//at.alicdn.com/t/font_1948714_o615zwc843k.svg?t=16167467802#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: \"\\e6\";}

.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: \"\\e3\";}

.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左滑删除内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！