vue移动端实现手指滑动效果
本文实例为大家分享了vue移动端实现手指滑动效果的具体代码,供大家参考,具体内容如下
滑动时候黄色块宽度跟着变化
通过touch点击实现
目前感觉宽度变化有点问题,还在思考中
下面上代码:
<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] //点击时的位子 this.touch.startX = touch.pageX this.touch.startY = touch.pageY console.log('----',this.$refs.right.clientWidth) }, //开始点击 touchMove(e) { console.log("move"); const touch = e.touches[0] //滑动位置和初始位置差 const deltaX = touch.pageX - this.touch.startX console.log(deltaX) const deltaY = touch.pageY - this.touch.startY; //打印right宽度 console.log('----',this.$refs.right.clientWidth+'px') const rwidth = this.$refs.right.clientWidth //改变right的宽度 this.$refs.right.style.width = (this.$refs.right.clientWidth + Math.floor(deltaX/50)) +'px' //进行判断,当宽度小于0或者大于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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)