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 相关文章推荐
html5的自定义data-*属性和jquery的data()方法的使用示例
Aug 21 Javascript
10个很棒的jQuery代码片段
Sep 24 Javascript
JS实现带鼠标效果的头像及文章列表代码
Sep 27 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
May 07 Javascript
JQuery解析XML数据的几个简单实例
May 18 Javascript
JavaScript实现in-place思想的快速排序方法
Aug 07 Javascript
js 点击a标签 获取a的自定义属性方法
Nov 21 Javascript
基于Angular.js实现的触摸滑动动画实例代码
Feb 19 Javascript
微信小程序自定义模态对话框实例详解
Aug 16 Javascript
vue脚手架搭建项目的兼容性配置详解
Jul 17 Javascript
对angular 实时更新模板视图的方法$apply详解
Oct 09 Javascript
Node.js系列之发起get/post请求(2)
Aug 30 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
老机欣赏|中国60年代精品收音机
2021/03/02 无线电
一个简单的自动发送邮件系统(一)
2006/10/09 PHP
PHP strtok()函数的优点分析
2010/03/02 PHP
php导出中文内容excel文件类实例
2015/07/06 PHP
PHP使用数组实现矩阵数学运算的方法示例
2017/05/29 PHP
php二维码生成以及下载实现
2017/09/28 PHP
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
JavaScript 仿关机效果的图片层
2008/12/26 Javascript
jquery select操作的日期联动实现代码
2009/12/06 Javascript
用JS判断IE版本的代码 超管用!
2011/08/09 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
2014/06/09 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
详解JSONObject和JSONArray区别及基本用法
2017/10/25 Javascript
React Native悬浮按钮组件的示例代码
2018/04/05 Javascript
vux-scroller实现移动端上拉加载功能过程解析
2019/10/08 Javascript
jQuery实现简单评论区功能
2020/10/26 jQuery
vue使用exif获取图片旋转,压缩的示例代码
2020/12/11 Vue.js
在Python中操作字典之clear()方法的使用
2015/05/21 Python
python列表的常用操作方法小结
2016/05/21 Python
python的pandas工具包,保存.csv文件时不要表头的实例
2018/06/14 Python
python正则表达式去除两个特殊字符间的内容方法
2018/12/24 Python
Python设计模式之职责链模式原理与用法实例分析
2019/01/11 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
MATLAB数学建模之画图汇总
2020/07/16 Python
python批量合成bilibili的m4s缓存文件为MP4格式 ver2.5
2020/12/01 Python
网页布局中CSS样式无效的十个重要原因详解
2017/08/10 HTML / CSS
韩国现代百货官网:Hmall
2018/03/21 全球购物
GANT葡萄牙官方商店:拥有美国运动服传统的生活方式品牌
2018/10/18 全球购物
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
介绍一下Ruby的多线程处理
2013/02/01 面试题
2014年学生会个人工作总结
2014/11/07 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
2014年监理工作总结范文
2014/11/17 职场文书
python3.7.2 tkinter entry框限定输入数字的操作
2021/05/22 Python
Java elasticsearch安装以及部署教程
2021/06/28 Java/Android
Mysql中调试存储过程最简单的方法
2021/06/30 MySQL