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 相关文章推荐
Javascript insertAfter() 实现函数代码
Oct 12 Javascript
验证码按回车不变解决方法
Mar 29 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
Apr 06 Javascript
JS实现静止元素自动移动示例
Apr 14 Javascript
AngularJS入门教程(二):AngularJS模板
Dec 06 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
Mar 05 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
Apr 16 Javascript
js实现鼠标点击左上角滑动菜单效果代码
Sep 06 Javascript
JS日程管理插件FullCalendar简单实例
Feb 07 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
vue2.0 常用的 UI 库实例讲解
Dec 12 Javascript
浅谈FastClick 填坑及源码解析
Mar 02 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
php支持断点续传、分块下载的类
2016/05/02 PHP
WEB 浏览器兼容 推荐收藏
2010/05/14 Javascript
关于JavaScript的with 语句的使用方法
2011/05/09 Javascript
JavaScript原型继承之基础机制分析
2011/08/26 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
2013/07/08 Javascript
Textarea根据内容自适应高度
2013/10/28 Javascript
AngularJS进行性能调优的7个建议
2015/12/28 Javascript
Bootstrap学习笔记之css组件(3)
2016/06/07 Javascript
jQuery实现简单倒计时功能的方法
2016/07/04 Javascript
jQuery基于正则表达式的表单验证功能示例
2017/01/21 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
2017/03/28 Javascript
移动端效果之IndexList详解
2017/10/20 Javascript
详解如何在angular2中获取节点
2017/11/23 Javascript
一次记住JavaScript的6个正则表达式方法
2018/02/22 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
2018/10/08 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
2018/10/10 Javascript
Element-UI踩坑之Pagination组件的使用
2018/10/29 Javascript
JS几个常用的函数和对象定义与用法示例
2020/01/15 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
Python Web框架Flask中使用七牛云存储实例
2015/02/08 Python
在Python中使用判断语句和循环的教程
2015/04/25 Python
在Django的模型中执行原始SQL查询的方法
2015/07/21 Python
Python3.6正式版新特性预览
2016/12/15 Python
Python字符串拼接的几种方法整理
2017/08/02 Python
python 拷贝特定后缀名文件,并保留原始目录结构的实例
2018/04/27 Python
python装饰器实现对异常代码出现进行自动监控的实现方法
2020/09/15 Python
Joseph官网:英国小众奢侈品牌
2019/05/17 全球购物
亚洲最大的运动鞋寄售店:KicksCrew
2020/11/26 全球购物
八年级历史教学反思
2014/01/10 职场文书
公司财务流程之主管工作流程
2014/03/03 职场文书
毕业实习单位意见
2015/06/04 职场文书
2016国庆促销广告语
2016/01/28 职场文书
CSS 圆形进度栏
2021/04/06 HTML / CSS
SQL之各种join小结详细讲解
2021/08/04 MySQL
详细介绍python操作RabbitMq
2022/04/12 Python
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android