滑块组件与偷窃者组件不同,滑块滑动时并不翻页,实现的是左滑时,显示右侧内容的功能
<强> 1,主要思路
思路和偷窃者组件类似,主要的也就是对三个触摸事件的处理:touchstart, touchmove, touchend
在touchstart事件处理程序中记录一些初始值,比如原始坐标,偏移距离,在touchmove事件处理程序中计算实时滑动的距离,让元素随之一起偏移,与偷窃者不同的是,滑块在左滑之前,不能右滑,以及滑动时,右侧元素的宽度要同步变化;在touchend事件处理程序中计算最终的滑动距离,左滑且大于阙值则滑动固定值,右滑或小于阙值则回到起始位置,右侧元素的宽度要同步变化。
滑块组件可以接收三个参数:
右侧滑出宽度的百分比
点击是否收起右侧
左侧是否滑动(false则覆盖左侧)
<强> 2代码实现
有两个槽来展示左右两边的内容
& lt; template>
& lt; div类=" ths_slider " ref=盎椤北?
& lt; div类="主"
@touchstart=" touchstart "
@touchmove=" touchmove "
@touchend=皌ouchend”比;
& lt;槽的名字=爸饕弊４? lt;/slot>
& lt;/div>
& lt; div类=罢贰钡膔ef=罢贰钡淖４?
& lt;槽的名字=罢贰钡淖４? lt;/slot>
& lt;/div>
& lt;/div>
& lt;/template>
记录页面宽度,根据参数isMainSlide来判断滑动的元素
安装(){
这一点。pageWidth=document.documentElement.clientWidth
这一点。sliderEle=sMainSlide & # 63;参。美元。滑块:refs.right美元
}
touchstart (e) {
这一点。originalPos=e.touches [0] .pageX
const变换=this.sliderEle.style.transform
这一点。originalLeft=数量(变换& # 63;transform.split (' (') [1] .split (“px”) [0]: 0)
这一点。oriRigWidth=riginalLeft & lt;0 & # 63;(这个数量。美元refs.right.style.width.split (“px”) [0]): 0
}，
touchmove (e) {
让moveDistance=e.touches [0]。pageX——这一点。originalPos//祝辞0右滑,& lt; 0左滑
如果(moveDistance比;0,,这一点。originalLeft祝辞=0){//未向左边滑动时,不能右滑
返回假
}
这一点。doSlide (moveDistance/2 + this.originalLeft)//除以2来控制滑动速度
}，
touchend (e) {
const moveDistance=e.changedTouches [0]。pageX——这一点。originalPos//祝辞0右滑,& lt; 0左滑
让距离
如果(!这。isClickBack,,moveDistance===0){//点击时不收起右侧
返回假
}
如果((-moveDistance)比;50){//向左滑动超过阙值时,右侧滑出固定距离
距离=ageWidth *。rightWidth/100
其他}{//向左滑动未超过阙值,或向右滑动时,回原位
距离=0
}
这一点。doSlide(——远程,真的)
}，/* *
*滑动方法- - -位置变化,,右侧宽度变化
* @param{号码}距离滑动距离
* @param{布尔}动画滑动是否有动画效果
*/doSlide(距离,动画=false) {
this.sliderEle.style。距离变换=' translateX ($ {} px)”
refs.right.style美元。宽度=冻?“px”
如果(this.isMainSlide) {
this.sliderEle.style。过渡=动画& # 63;“变换0”:“初始”
refs.right.style美元。过渡=动画& # 63;“宽0”:“初始”
其他}{
this.sliderEle.style。过渡=动画& # 63;“宽度改变0,0”:“初始”
}
}
<强> 3组件使用
父组件可以调用滑块组件的doSlide()方法来实现点击唤出右侧元素
& lt; t-slider类=盎椤北?
& lt;模板槽=爸饕痹谧蟛嗷? lt;/template>
& lt;模板槽=罢贰钡淖４?
& lt; div类="编辑"祝辞编辑& lt;/div>
& lt; div类="删除"祝辞删除& lt;/div>
& lt;/template>
& lt;/t-slider>
& lt; t-slider类=盎椤?rightWidth=皉ightWidth”: isMainSlide=癴alse”比;
& lt;模板槽=爸饕北?
& lt; div>覆盖左侧& lt;/div>
& lt; div类=癰tn @click”=皊howRight”祝辞点击唤出& lt;/div>
& lt;/template>
& lt;模板槽=罢贰钡淖４?
& lt; div类=" newContent "祝辞newContent
& lt;/template>
& lt;/t-slider>
& lt; t-slider类=盎椤?isClickBack=癴alse”比;
& lt;模板槽=爸饕弊４堑慊鞑皇掌? lt;/template>
& lt;模板槽=罢贰钡淖４?
& lt; div类="编辑"祝辞编辑& lt;/div>
& lt; div类="删除"祝辞删除& lt;/div>
& lt;/template>
& lt;/t-slider>
