Vue左滑组件slider使用详解


Posted in Javascript onAugust 21, 2020

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使用详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
Sep 25 Javascript
用JavaScript编写COM组件的步骤
Mar 17 Javascript
图片在浏览器中底部对齐 解决方法之一
Nov 30 Javascript
js获取url参数代码实例分享(JS操作URL)
Dec 13 Javascript
举例详解JavaScript中Promise的使用
Jun 24 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
May 12 Javascript
laydate日历控件使用方法详解
Nov 20 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
vue-router重定向和路由别名的使用讲解
Jan 19 Javascript
JS温故而知新之变量提升和时间死区
Jan 27 Javascript
vue 根据选择条件显示指定参数的例子
Nov 09 Javascript
Vue解析带html标签的字符串为dom的实例
Nov 13 Javascript
vue实现移动端触屏拖拽功能
Aug 21 #Javascript
vue实现移动端拖动排序
Aug 21 #Javascript
微信小程序实现聊天室
Aug 21 #Javascript
vue实现折线图 可按时间查询
Aug 21 #Javascript
Vue按时间段查询数据组件使用详解
Aug 21 #Javascript
js绘制一条直线并旋转45度
Aug 21 #Javascript
AJAX XMLHttpRequest对象创建使用详解
Aug 20 #Javascript
You might like
动态新闻发布的实现及其技巧
2006/10/09 PHP
解析php中如何调用用户自定义函数
2013/08/06 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
PHP仿微信多图片预览上传实例代码
2016/09/13 PHP
php之可变函数的实例详解
2017/09/13 PHP
PHP的mysqli_rollback()函数讲解
2019/01/23 PHP
javascript中获取选中对象的类型
2007/04/02 Javascript
jQuery DOM操作小结与实例
2010/01/07 Javascript
jQuery EasyUI 中文API Button使用实例
2010/04/14 Javascript
HTML页面登录时的JS验证方法
2014/05/28 Javascript
javascript实现数独解法
2015/03/14 Javascript
jQuery表单验证功能实例
2015/08/28 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
js代码延迟一定时间后执行一个函数的实例
2017/02/15 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
2017/05/27 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
JavaScript之创意时钟项目(实例讲解)
2017/10/23 Javascript
微信小程序form表单组件示例代码
2018/07/15 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
2018/11/29 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
2019/09/12 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
2019/09/17 Javascript
vuex 实现getter值赋值给vue组件里的data示例
2019/11/05 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
2020/08/04 Javascript
使用Python监视指定目录下文件变更的方法
2018/10/15 Python
在python中利用GDAL对tif文件进行读写的方法
2018/11/29 Python
关于Python中的向量相加和numpy中的向量相加效率对比
2019/08/26 Python
python匿名函数的使用方法解析
2019/10/10 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
荷兰男士时尚网上商店:Suitable
2017/12/25 全球购物
荣耀俄罗斯官网:HONOR俄罗斯
2020/10/31 全球购物
军训生自我鉴定范文
2013/12/27 职场文书
缴纳养老保险的证明
2014/01/10 职场文书
交通事故调解协议书
2014/04/16 职场文书
故意伤害人身损害赔偿协议书
2014/11/19 职场文书
学校端午节活动总结
2015/02/11 职场文书