Vue mobile terminal realizes finger sliding effect

This article example shares the specific code for Vue mobile terminal to achieve finger sliding effect for your reference. The specific content is as follows

When sliding, the width of the yellow block changes accordingly. It is realized by touch clicking. At present, I feel that the width change has some problems. I am still thinking about it.

Here is the code:

<template lang="html">
  <div class="back" ref="back" @touchstart.prevent="touchStart" @touchmove.prevent="touchMove">
    <div class="back-r" 
 @touchstart.prevent="touchStart" @touchmove.prevent="touchMove"
 @touchend="touchEnd"
 ref="right"></div>
  </div>
</template>
 
<script>
export default {
  data() {
  },
  created() {
    this.touch = {}
  },
  methods: {
    touchStart(e) {
      const touch = e.touches[0]
   
  //The position when clicking this.touch.startX = touch.pageX
      this.touch.startY = touch.pageY
   console.log('----',this.$refs.right.clientWidth)
    },
//Start clicking touchMove(e) {
      console.log("move");
      const touch = e.touches[0]
   //The difference between the sliding position and the initial position const deltaX = touch.pageX - this.touch.startX
   console.log(deltaX)
      const deltaY = touch.pageY - this.touch.startY;
      //Print right width console.log('----',this.$refs.right.clientWidth+'px') 
   const rwidth = this.$refs.right.clientWidth
   //Change the width of right this.$refs.right.style.width = (this.$refs.right.clientWidth + Math.floor(deltaX/50)) +'px'
   //Judge if the width is less than 0 or greater than 400
   if (rwidth<0) {
    this.$refs.right.style.width = 0
   } else if(rwidth>400){
    this.$refs.right.style.width = 400+'px'
   } 
   console.log('----',this.$refs.right.clientWidth+'px')

    },
    touchEnd() {
      console.log("end");
      // console.log(this.percent);
    }
  }
}
</script>
 
<style scoped lang="stylus" rel="stylesheet/stylus">
body{
  margin:0;
  padding: 0;
  overflow: hidden;
  touch-action:none;
}
.back{
 width: 100%
 height: 100px
 border 10px solid #0000FF
 overflow: hidden;
}
  
  
  .back-r{
   // display: inline-block
   // vertical-align: top
   position: relative
   width: 400px
   height: 100%
   overflow: hidden;
   background-color: yellow
  }
    
</style>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: