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 相关文章推荐
定义select的边框颜色
Apr 28 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
May 16 Javascript
通过JS动态创建一个html DOM元素并显示
Oct 15 Javascript
js实现大转盘抽奖游戏实例
Jun 24 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
May 11 Javascript
jQuery包裹节点用法完整示例
Sep 13 Javascript
Vue.js中数组变动的检测详解
Oct 12 Javascript
JS和canvas实现俄罗斯方块
Mar 14 Javascript
JS奇技之利用scroll来监听resize详解
Jun 15 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
Aug 04 Javascript
vue实现的多页面项目如何优化打包的步骤详解
Jul 19 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
Aug 14 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
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
php 输出json及显示json中的中文汉字详解及实例
2016/11/09 PHP
PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】
2019/11/04 PHP
详解JavaScript函数绑定
2013/08/18 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
2014/07/31 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
js鼠标点击图片切换效果代码分享
2015/08/26 Javascript
jquery实现加载进度条提示效果
2015/11/23 Javascript
jQuery实现的简单悬浮层功能完整实例
2017/01/23 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
2017/04/07 Javascript
详解Vue 事件驱动和依赖追踪
2017/04/22 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
2017/10/17 Javascript
js读取本地文件的实例
2017/12/22 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
2018/02/05 Javascript
浅谈Angular 的变化检测的方法
2018/03/01 Javascript
在vue项目中引用Iview的方法
2018/09/14 Javascript
微信小程序授权登录及解密unionId出错的方法
2018/09/26 Javascript
浅谈js闭包理解
2019/03/28 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
2019/09/03 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
2019/11/01 jQuery
简单了解JS打开url的方法
2020/02/21 Javascript
[43:24]VG vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python根据出生日期获得年龄的方法
2015/03/31 Python
python使用邻接矩阵构造图代码示例
2017/11/10 Python
TensorFlow实现RNN循环神经网络
2018/02/28 Python
Python实现定时精度可调节的定时器
2018/04/15 Python
python通过实例讲解反射机制
2019/10/17 Python
Pytorch 高效使用GPU的操作
2020/06/27 Python
html5 canvas-1.canvas介绍(hello canvas)
2013/01/07 HTML / CSS
大学生求职信范文
2014/05/24 职场文书
售房委托书
2014/08/30 职场文书
党风廉正建设责任书
2015/01/29 职场文书
2015年教师党员承诺书
2015/04/27 职场文书
Python实现猜拳与猜数字游戏的方法详解
2022/04/06 Python