本文實例為大家分享了vue實現滑動時紅黃色塊左右滑動相應距離，效果如下圖
實現過程主要在于實時跟蹤手指滑動位置與原位置之間的偏移量，再相應移動紅黃塊。
紅黃塊布局如下
back中包含back-l,back-r左右兩塊，正常情況下為了隱藏其中一塊，子模塊需要設置display: inline-block，并且寬度都需要設置width: 100%。父模塊中設置white-space: nowrap用于處理兩個子模塊之間的空白。
<template lang="html"> <div class="back" @touchstart.prevent="touchStart" @touchmove.prevent="touchMove" @touchend="touchEnd" ref="back"> <div class="back-l" ref="left"></div> <div class="back-r" ref="right"></div> </div></template> <style scoped lang="stylus" rel="stylesheet/stylus">.back position: fixed width: 100% height: 100px white-space: nowrap .back-l position: relative vertical-align: top display: inline-block width: 100% height: 100% background-color: red .back-r display: inline-block vertical-align: top position: relative width: 100% height: 100% background-color: yellow</style>
父模塊監聽滑動事件
滑動事件分為三種：touchstart，touchmove，touchEnd，加上prevent避免頁面相應滑動。
在touchstart中記錄滑動開始點：
touchStart(e) { const touch = e.touches[0] this.touch.startX = touch.pageX this.touch.startY = touch.pageY }touchmove中為滑動過程，手指未離開頁面，離開頁面時觸發touchend。滑動過程中，當橫向偏離位置大于縱向偏離位置時認為滑動有效，記錄手指偏離位置，相應移動紅黃塊。
touchMove(e) { console.log("move"); const touch = e.touches[0] //橫向和縱向偏離位置 const deltaX = touch.pageX - this.touch.startX const deltaY = touch.pageY - this.touch.startY if (Math.abs(deltaY) > Math.abs(deltaX)) { return } const left = this.currentPlay == 'red' ? 0 : -window.innerWidth var offsetWidth = Math.min(0, Math.max(-window.innerWidth,left+deltaX)) //記錄滑動的距離占屏幕寬度的百分比，如果滑動太少則不切換 this.percent = Math.abs(offsetWidth/window.innerWidth) //移動紅黃塊 this.$refs.back.style["transform"] = `translate3d(${offsetWidth}px,0,0)` //設置動畫時間 this.$refs.back.style["transitionDuration"] = 10 }計算偏移量時首先需要知道當前偏移位置，如果當前在紅塊，初始偏移量為0，否則初始偏移量為負的屏幕寬度。初始偏移量加上橫向偏移量首先和-window.innerWidth取最大值，-window.innerWidth為最左偏移量。再和0相比較取最小值，偏移量為0或者大于零則不再（向右移動）移動，小于零則可以向左移動。
touchend中處理最終效果，如果滑動距離不大于某一值則恢復原位，否則切換。
touchEnd() { console.log("end"); console.log(this.percent); let offsetWidth let percent //當前為紅色，滑動占比大于0.1則切換，否則回到原位置 if(this.currentPlay === 'red'){ if(this.percent > 0.1) { this.currentPlay = 'yellow' offsetWidth = -window.innerWidth } else { offsetWidth = 0 } } else { //當前為黃色，滑動占比大于0.9則切換，否則回到原位置 if(this.percent < 0.9) { this.currentPlay = 'red' offsetWidth = 0 } else { offsetWidth = -window.innerWidth } } //這里的transform是針對最開始的位置而言，而不是移動過程中的位置 this.$refs.back.style["transform"] = `translate3d(${offsetWidth}px,0,0)` this.$refs.back.style["transitionDuration"] = 10}完整代碼
<template lang="html"> <div class="back" @touchstart.prevent="touchStart" @touchmove.prevent="touchMove" @touchend="touchEnd" ref="back"> <div class="back-l" ref="left"></div> <div class="back-r" ref="right"></div> </div></template> <script>export default { data() { return { currentPlay: 'red', percent: 0 } }, created() { this.touch = {} }, methods: { touchStart(e) { const touch = e.touches[0] this.touch.startX = touch.pageX this.touch.startY = touch.pageY }, touchMove(e) { console.log("move"); const touch = e.touches[0] const deltaX = touch.pageX - this.touch.startX const deltaY = touch.pageY - this.touch.startY if (Math.abs(deltaY) > Math.abs(deltaX)) { return } const left = this.currentPlay == 'red' ? 0 : -window.innerWidth var offsetWidth = Math.min(0, Math.max(-window.innerWidth,left+deltaX)) this.percent = Math.abs(offsetWidth/window.innerWidth) this.$refs.back.style["transform"] = `translate3d(${offsetWidth}px,0,0)` this.$refs.back.style["transitionDuration"] = 10 }, touchEnd() { console.log("end"); console.log(this.percent); let offsetWidth let percent if(this.currentPlay === 'red'){ if(this.percent > 0.1) { this.currentPlay = 'yellow' offsetWidth = -window.innerWidth } else { offsetWidth = 0 } } else { if(this.percent < 0.9) { this.currentPlay = 'red' offsetWidth = 0 } else { offsetWidth = -window.innerWidth } } this.$refs.back.style["transform"] = `translate3d(${offsetWidth}px,0,0)` this.$refs.back.style["transitionDuration"] = 10 } }}</script> <style scoped lang="stylus" rel="stylesheet/stylus">.back position: fixed width: 100% height: 100px white-space: nowrap .back-l position: relative vertical-align: top display: inline-block width: 100% height: 100% background-color: red .back-r display: inline-block vertical-align: top position: relative width: 100% height: 100% background-color: yellow </style>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
