好资源导航 » 文章资讯 » Vue左滑组件slider使用详解

Vue左滑组件slider使用详解

2023-07-18 10:30:04 86

slider组件与swiper组件不同，slider滑动时并不翻页，实现的是左滑时，显示右侧内容的功能

1、主要思路

思路和swiper组件类似，主要的也就是对三个触摸事件的处理：touchstart、touchmove、touchend

在touchstart事件处理程序中记录一些初始值，比如原始坐标，偏移距离；在touchmove事件处理程序中计算实时滑动的距离，让元素随之一起偏移，与swiper不同的是，slider在左滑之前，不能右滑，以及滑动时，右侧元素的宽度要同步变化；在touchend事件处理程序中计算最终的滑动距离，左滑且大于阙值则滑动固定值，右滑或小于阙值则回到起始位置，右侧元素的宽度要同步变化。

slider组件可以接收三个参数：

rightWidth：右侧滑出宽度的百分比

isClickBack：点击是否收起右侧

isMainSlide：左侧是否滑动（false则覆盖左侧）

2、代码实现

页面结构：有两个slot来展示左右两边的内容

初始设置：记录页面宽度，根据参数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
consttransform=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){
letmoveDistance=e.touches[0].pageX-this.originalPos//>0右滑，<0左滑
if(moveDistance>0&&this.originalLeft>=0){//未向左边滑动时，不能右滑
returnfalse
}
this.doSlide(moveDistance/2+this.originalLeft)//除以2来控制滑动速度
},
touchend(e){
constmoveDistance=e.changedTouches[0].pageX-this.originalPos//>0右滑，<0左滑
letdistance
if(!this.isClickBack&&moveDistance===0){//点击时不收起右侧
returnfalse
}
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()方法来实现点击唤出右侧元素


左侧滑动

编辑

删除

覆盖左侧

点击唤出

newContent

点击不收起编辑

删除

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、效果展示

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

Vue左滑组件slider使用详解

热门推荐

随机推荐