vue 移动端左右滑动

html内容：

<template>
    <div>
        <div ref="slide" @touchstart="start($event)" @touchmove="move($event)" @touchend="end($event)" style="border:1px solid red;height:150px;">
          试试滑动我
        </div>
        <div v-show="isshow">
            {{msg}}
        </div>
    </div>
</template>

script内容：

<script>
  export default {
    name:'comment',
    data() {
      return {
        isshow:false,
        flag: false,
        startX: 0,
        endX: 0,
        msg:'',
      }
    },
    mounted (){
            var _this = this;
            // 使用js的现代事件监听transition过渡结束
            this.$refs.slide.addEventListener('transitionend',function(){
                _this.endX = this.offsetLeft;
            })
        },
    methods: {
        start (e){  //记录开始滑动屏幕的X轴的位置
                this.flag = true;
                this.startX = e.touches[0].clientX;
                this.endX = this.$refs.slide.offsetLeft;
            },
            move (e){
                if(this.flag){
                    // 处理鼠标移动的逻辑
                    var moveX = this.endX + (e.touches[0].clientX - this.startX);  //计算滑动的距离
                    
                }
            },
            end (e){
                if(this.flag){
                    this.flag = false;
                    var moveX = e.changedTouches[0].clientX - this.startX;  //计算滑动的距离
                    if(moveX < 0){    //向左滑动
                        this.isshow=true;
                        this.msg="向左左左左左左左左左滑动了!";
                    }else if(moveX > 0){
                        this.isshow=true;
                        this.msg="向右右右右右滑动了!";
                    }
                }
            },

    }
  }
</script>

有其它效果可参考：https://www.cnblogs.com/webmuluo/p/11096124.html