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

1、主要思路

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

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

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

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

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

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

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

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

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

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

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) { // 未向左邊滑動(dòng)時(shí)，不能右滑 return false } this.doSlide(moveDistance / 2 + this.originalLeft) // 除以2來(lái)控制滑動(dòng)速度},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) { // 向左滑動(dòng)超過(guò)闕值時(shí),右側(cè)滑出固定距離 distance = this.pageWidth * this.rightWidth / 100 } else { // 向左滑動(dòng)未超過(guò)闕值，或向右滑動(dòng)時(shí)，回原位 distance = 0 } this.doSlide(-distance, true)},/** * 滑動(dòng)方法---位置變化 && 右側(cè)寬度變化 * @param {Number} distance 滑動(dòng)距離 * @param {Boolean} animate 滑動(dòng)是否有動(dòng)畫(huà)效果 */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()方法來(lái)實(shí)現(xiàn)點(diǎn)擊喚出右側(cè)元素

<t-slider class='slider'> <template slot='main'>左側(cè)滑動(dòng)</template> <template slot='right'> <div class='edit'>編輯</div> <div class='delete'>刪除</div> </template></t-slider><t-slider :rightWidth='rightWidth' :isMainSlide='false'> <template slot='main'> <div>覆蓋左側(cè)</div> <div @click='showRight'>點(diǎn)擊喚出</div> </template> <template slot='right'> <div class='newContent'>newContent</div> </template></t-slider><t-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、效果展示

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。