快捷導(dǎo)航

Vue左滑組件slider使用詳解

更新時(shí)間：2020年08月21日 11:30:00 作者：latency_cheng

這篇文章主要為大家詳細(xì)介紹了Vue左滑組件slider的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

slider組件與swiper組件不同，slider滑動時(shí)并不翻頁，實(shí)現(xiàn)的是左滑時(shí)，顯示右側(cè)內(nèi)容的功能

1、主要思路

思路和swiper組件類似，主要的也就是對三個觸摸事件的處理：touchstart、touchmove、touchend

在touchstart事件處理程序中記錄一些初始值，比如原始坐標(biāo)，偏移距離；在touchmove事件處理程序中計(jì)算實(shí)時(shí)滑動的距離，讓元素隨之一起偏移，與swiper不同的是，slider在左滑之前，不能右滑，以及滑動時(shí)，右側(cè)元素的寬度要同步變化；在touchend事件處理程序中計(jì)算最終的滑動距離，左滑且大于闕值則滑動固定值，右滑或小于闕值則回到起始位置，右側(cè)元素的寬度要同步變化。

slider組件可以接收三個參數(shù)：

rightWidth： 右側(cè)滑出寬度的百分比

isClickBack： 點(diǎn)擊是否收起右側(cè)

isMainSlide： 左側(cè)是否滑動（false則覆蓋左側(cè)）

2、代碼實(shí)現(xiàn)

頁面結(jié)構(gòu)：有兩個slot來展示左右兩邊的內(nèi)容

<template>
 <div class="ths_slider" ref="slider">
 <div class="main"
  @touchstart="touchstart"
  @touchmove="touchmove"
  @touchend="touchend">
  <slot name="main"></slot>
 </div>
 <div class="right" ref="right">
  <slot name="right"></slot>
 </div>
 </div>
</template>

初始設(shè)置：記錄頁面寬度，根據(jù)參數(shù)isMainSlide來判斷滑動的元素

mounted () {
 this.pageWidth = document.documentElement.clientWidth
 this.sliderEle = this.isMainSlide ? this.$refs.slider : this.$refs.right
}

事件處理：

touchstart (e) {
 this.originalPos = e.touches[0].pageX
 const transform = this.sliderEle.style.transform
 this.originalLeft = Number(transform ? transform.split('(')[1].split('px')[0] : 0)
 this.oriRigWidth = this.originalLeft < 0 ? Number(this.$refs.right.style.width.split('px')[0]) : 0
},
touchmove (e) {
 let moveDistance = e.touches[0].pageX - this.originalPos // >0 右滑，<0 左滑
 if (moveDistance > 0 && this.originalLeft >= 0) { // 未向左邊滑動時(shí)，不能右滑
 return false
 }
 this.doSlide(moveDistance / 2 + this.originalLeft) // 除以2來控制滑動速度
},
touchend (e) {
 const moveDistance = e.changedTouches[0].pageX - this.originalPos // >0 右滑，<0 左滑
 let distance
 if (!this.isClickBack && moveDistance === 0) { // 點(diǎn)擊時(shí)不收起右側(cè)
 return false
 }
 if ((-moveDistance) > 50) { // 向左滑動超過闕值時(shí),右側(cè)滑出固定距離
 distance = this.pageWidth * this.rightWidth / 100
 } else { // 向左滑動未超過闕值，或向右滑動時(shí)，回原位
 distance = 0
 }
 this.doSlide(-distance, true)
},
/**
 * 滑動方法---位置變化 && 右側(cè)寬度變化
 * @param {Number} distance 滑動距離
 * @param {Boolean} animate 滑動是否有動畫效果
 */
doSlide (distance, animate = false) {
 this.sliderEle.style.transform = `translateX(${distance}px)`
 this.$refs.right.style.width = -distance + 'px'
 if (this.isMainSlide) {
 this.sliderEle.style.transition = animate ? 'transform .5s' : 'initial'
 this.$refs.right.style.transition = animate ? 'width .5s' : 'initial'
 } else {
 this.sliderEle.style.transition = animate ? 'transform .5s, width .5s' : 'initial'
 }
}

3、組件使用

父組件可以調(diào)用slider組件的doSlide()方法來實(shí)現(xiàn)點(diǎn)擊喚出右側(cè)元素

<t-slider class="slider">
 <template slot="main">左側(cè)滑動</template>
 <template slot="right">
 <div class="edit">編輯</div>
 <div class="delete">刪除</div>
 </template>
</t-slider>
<t-slider class="slider" :rightWidth="rightWidth" :isMainSlide="false">
 <template slot="main">
 <div>覆蓋左側(cè)</div>
 <div class="btn" @click="showRight">點(diǎn)擊喚出</div>
 </template>
 <template slot="right">
 <div class="newContent">newContent</div>
 </template>
</t-slider>
<t-slider class="slider" :isClickBack="false">
 <template slot="main">點(diǎn)擊不收起</template>
 <template slot="right">
 <div class="edit">編輯</div>
 <div class="delete">刪除</div>
 </template>
</t-slider>

components: {TSlider},
data () {
 return {
 pageWidth: null,
 rightWidth: 80
 }
},
mounted () {
 this.pageWidth = document.documentElement.clientWidth
},
 
methods: {
 showRight () {
 this.$refs.mainSlider.doSlide(-this.pageWidth * this.rightWidth / 100, true)
 }
}

4、效果展示