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轻松实现Ajax的实例代码
Aug 16 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
May 05 Javascript
基于jQuery实现音乐播放试听列表
Apr 14 Javascript
微信小程序页面传值实例分析
Apr 19 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
Dec 11 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
Jan 31 Javascript
echarts设置图例颜色和地图底色的方法实例
Aug 01 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
Sep 03 Javascript
学习使用ExpressJS 4.0中的新Router的用法
Nov 06 Javascript
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
基于JavaScript获取base64图片大小
Oct 18 Javascript
vue ajax 拦截原理与实现方法示例
Nov 29 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
Syphon 秘笈
2021/03/03 冲泡冲煮
PHP 模板高级篇总结
2006/12/21 PHP
php discuz 主题表和回帖表的设计
2009/03/13 PHP
将时间以距今多久的形式表示,PHP,js双版本
2012/09/25 PHP
一个严格的PHP Session会话超时时间设置方法
2014/06/10 PHP
总结PHP中数值计算的注意事项
2016/08/14 PHP
关于PHP通用返回值设置方法
2017/03/31 PHP
PHP中时间加减函数strtotime用法分析
2017/04/26 PHP
jQuery 全选效果实现代码
2009/03/23 Javascript
javascript实现英文首字母大写
2015/04/23 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
2016/03/03 Javascript
JavaScript修改作用域外变量的方法
2016/03/25 Javascript
validationEngine 表单验证插件使用实例代码
2017/06/15 Javascript
js实现GIF动图分解成多帧图片上传
2019/10/24 Javascript
Jquery使用each函数实现遍历及数组处理
2020/07/14 jQuery
python学习之编写查询ip程序
2016/02/27 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/27 Python
python爬虫URL重试机制的实现方法(python2.7以及python3.5)
2018/12/18 Python
PyCharm的设置方法和第一个Python程序的建立
2019/01/16 Python
Python程序打包工具py2exe和PyInstaller详解
2019/06/28 Python
基于Python词云分析政府工作报告关键词
2020/06/02 Python
解决pycharm中的run和debug失效无法点击运行
2020/06/09 Python
python和php哪个容易学
2020/06/19 Python
Html5 FileReader实现即时上传图片功能实例代码
2014/09/01 HTML / CSS
video.js支持m3u8格式直播的实现示例
2020/05/20 HTML / CSS
巴西图书和电子产品购物网站:Saraiva
2017/06/07 全球购物
澳大利亚连衣裙和女装在线:Esther
2017/11/11 全球购物
如何开发一个JQuery插件
2016/07/28 面试题
党员自我评议个人对照检查材料
2014/09/16 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
学校趣味运动会开幕词
2016/03/04 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书
话题作文之诚信
2019/11/28 职场文书
Java中PriorityQueue实现最小堆和最大堆的用法
2021/06/27 Java/Android
浅谈如何保证Mysql主从一致
2022/03/13 MySQL
MySQL RC事务隔离的实现
2022/03/31 MySQL