溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Vue左滑組件slider使用詳解

發布時間:2020-09-01 02:05:06 來源:腳本之家 閱讀:370 作者:latency_cheng 欄目:開發技術

slider組件與swiper組件不同,slider滑動時并不翻頁,實現的是左滑時,顯示右側內容的功能

Vue左滑組件slider使用詳解

1、主要思路

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

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

slider組件可以接收三個參數:

rightWidth: 右側滑出寬度的百分比

isClickBack: 點擊是否收起右側

isMainSlide: 左側是否滑動(false則覆蓋左側)

2、代碼實現

頁面結構:有兩個slot來展示左右兩邊的內容

<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>

初始設置:記錄頁面寬度,根據參數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) { // 未向左邊滑動時,不能右滑
 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) { // 點擊時不收起右側
 return false
 }
 if ((-moveDistance) > 50) { // 向左滑動超過闕值時,右側滑出固定距離
 distance = this.pageWidth * this.rightWidth / 100
 } else { // 向左滑動未超過闕值,或向右滑動時,回原位
 distance = 0
 }
 this.doSlide(-distance, true)
},
/**
 * 滑動方法---位置變化 && 右側寬度變化
 * @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、組件使用

父組件可以調用slider組件的doSlide()方法來實現點擊喚出右側元素

<t-slider class="slider">
 <template slot="main">左側滑動</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>覆蓋左側</div>
 <div class="btn" @click="showRight">點擊喚出</div>
 </template>
 <template slot="right">
 <div class="newContent">newContent</div>
 </template>
</t-slider>
<t-slider class="slider" :isClickBack="false">
 <template slot="main">點擊不收起</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、效果展示

Vue左滑組件slider使用詳解

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女