在语音社交聊天室源码开发过程中，像消息模块，要想删除与其他用户的聊天，需要实现一个左滑删除的功能，这样更有利于提高用户的使用体验，接下来就让我们一起来看看语音社交语音聊天室源码是如何在开发中实现该功能的吧。
话不多说 ，上代码
<template><div class="slider-item"><divclass="content"@touchstart='touchStart'@touchmove='touchMove'@touchend='touchEnd':style="deleteSlider"><div class="remove">删除</div></div></div></template>
<script>// 获取删除按钮的宽度，此宽度为滑块左滑的最大距离const DELBTNWIDTH = 60;export default {data() {return {startX: 0, // 开始posendX: 0, // 结束posmoveX: 0, // 滑动时的posdisX: 0, // 滑动距离deleteSlider: 'transform:translateX(0px)',};},methods: {touchStart(timestamp, ev) {ev = ev || event;this.currSliderTimestamp = timestamp;this.startX = 0;// tounches类数组，等于1时表示此时有只有一只手指在触摸屏幕if (ev.touches.length === 1) {// 记录开始位置this.startX = ev.touches[0].clientX;console.log(this.startX, this.disX);}},touchMove(timestamp, ev) {ev = ev || event;if (ev.touches.length === 1) {// 滑动时距离浏览器左侧实时距离this.moveX = ev.touches[0].clientX;//实时滑动距离，和上一次滑动做个衔接。防止第二次触发的时候，位置不对的问题this.disX = this.startX - this.moveX + this.disX;// 如果是向右滑动或者不滑动，不改变滑块的位置if (this.disX > 0) {if (this.disX < 100) {this.deleteSlider = 'transform:translateX(-' + this.disX + 'px)';} else {this.deleteSlider = 'transform:translateX(-100px)';}} else {if (this.disX < -60) {this.deleteSlider = 'transform:translateX(60px)';} else {this.deleteSlider = 'transform:translateX(' + Math.abs(this.disX) + 'px)';}}}},touchEnd() {//滑动完成后，滑块应该在的位置if (this.disX < 100) {this.deleteSlider = 'transform:translateX(0px)';this.disX = 0;} else {this.deleteSlider = 'transform:translateX(-' + DELBTNWIDTH + 'px)';this.disX = 60;}},},};</script>
<style scoped lang="stylus" rel="stylesheet/stylus">.slider-item {width: 100%;height: 60px;border-bottom: 1px solid #eeeeee;overflow: hidden;display: flex;position: relative;.content {min-width: 100%;height: 100%;background: yellow;box-sizing: normal-box;padding-right: 60px;position: relative;transition-property: all;transition-duration: 0.4s;transition-timing-function: cubic-bezier(0, 0.85, 0.72, 0.86);transition-delay: 0s;.remove {position: absolute;top: 0;right: 0;width: 60px;height: 60px;background: #fe5ba8;text-align: center;line-height: 60px;font-size: 15px;color: #ffffff;}}}</style>
以上就是“语音社交聊天室源码开发，如何实现左滑删除功能”的全部内容，希望对大家有帮助。
