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 相关文章推荐
jQuery图片滚动图片的效果(另类实现)
Jun 02 Javascript
浅析js封装和作用域
Jul 09 Javascript
jQuery中$.click()无效问题分析
Jan 29 Javascript
JQuery实现展开关闭层的方法
Feb 17 Javascript
jqueryUI里拖拽排序示例分析
Feb 26 Javascript
js判断是否为空和typeof的用法(详解)
Oct 07 Javascript
轻松学习Javascript闭包
Mar 01 Javascript
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
深入理解vue.js中$watch的oldvalue与newValue
Aug 07 Javascript
JS实现自定义弹窗功能
Aug 08 Javascript
Vue开发中遇到的跨域问题及解决方法
Feb 11 Javascript
vue实现移动端input上传视频、音频
Aug 18 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版本号
2006/10/09 PHP
php权重计算方法代码分享
2014/01/09 PHP
基于preg_match_all采集后数据处理的一点心得笔记(编码转换和正则匹配)
2014/01/31 PHP
php实现cookie加密的方法
2015/03/10 PHP
Zend Framework教程之Loader以及PluginLoader用法详解
2016/03/09 PHP
JavaScript快速检测浏览器对CSS3特性的支持情况
2012/09/26 Javascript
JavaScript中连接操作Oracle数据库实例
2015/04/02 Javascript
javascript函数特点实例分析
2015/05/14 Javascript
DOM中事件处理概览与原理的全面解析
2016/08/16 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
2016/12/28 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
2017/01/12 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
2019/07/10 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
2019/09/23 Javascript
javascript实现商品图片放大镜
2019/11/28 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
解决Python传递中文参数的问题
2015/08/04 Python
利用python实现微信头像加红色数字功能
2018/03/26 Python
对python实现模板生成脚本的方法详解
2019/01/30 Python
Python多项式回归的实现方法
2019/03/11 Python
python实现可变变量名方法详解
2019/07/01 Python
python实现列表中最大最小值输出的示例
2019/07/09 Python
Python实现微信好友的数据分析
2019/12/16 Python
Python 如何实现访问者模式
2020/07/28 Python
Python之多进程与多线程的使用
2021/02/23 Python
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
CSS3实现的渐变幻灯片效果
2020/12/07 HTML / CSS
英国最大的自有市场,比亚马逊便宜:Flubit
2019/03/19 全球购物
可以在一个PHP文件里面include另外一个PHP文件两次吗
2015/05/22 面试题
个人作风剖析材料
2014/02/02 职场文书
公安派出所所长四风问题个人对照检查材料
2014/10/04 职场文书
实习工作表现评语
2014/12/31 职场文书
食品安全主题班会
2015/08/13 职场文书
python3使用diagrams绘制架构图的步骤
2021/04/08 Python
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记