Vue左滑组件slider的实现
本文链接:https://blog.csdn.net/latency_cheng/article/details/82983000
slider组件与swiper组件不同,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的实现的更多相关文章
- Vue 仿QQ左滑删除功能(非原创)
非原创,摘选来源:http://www.jb51.net/article/136221.htm. 废话不多说,相当实用,先记录. Html代码: <div class="contain ...
- vue js判断长按触发及手指的上滑、下滑、左滑、又滑
<span class="btn" @touchstart="touchstart()" @touchmove="touchmove()&quo ...
- Taro UI开发小程序实现左滑喜欢右滑不喜欢效果
前言:年后入职了一家新公司,与前同事交接完之后,发现公司有一个四端的项目(iOS,Android,H5,小程序),iOS和安卓都实现了左滑右滑的效果,而h5和小程序端没实现,询问得知前同事因网上没找到 ...
- js高仿QQ消息列表左滑功能
该组件,主要功能类似于QQ消息列表左滑出现删除.标为已读等按钮的功能:现在的版本用的是纯javaScript编写:后续会跟进 angularJs 开发的类似组件以及jquery的; 下面,就让我们来认 ...
- wex5 实战 苹果左滑删除与长按编辑
用了多年苹果,习惯了苹果的左滑删除与长按编辑,特别是短信什么的,很多安卓界面也采用了类似方式. 我的想法突如其来,用wex5也设计一个这样的功能,可以吗? 那句广告词,没有什么不可能. 呵呵. 一 ...
- 基于touch.js 左滑删除功能
左滑删除功能 完整代码如下: (touch.js) <!DOCTYPE html> <html> <head> <meta charset="UTF ...
- 微信小程序实现左滑删除源码
左滑删除效果在app的交互方式中十分流行,比如全民应用微信 微信左滑删除 再比如曾引起很大反响的效率app Clear Clear左滑删除 从技术上来说,实现这个效果并不困难,响应一下滑动操作,移动一 ...
- 运用wxs制作微信小程序左滑功能和跳转,性能更优越
锲子 微信小程序自定义左滑功能加上跳转,换成以往,左滑功能的逻辑一般是在js中实现,但在拖动方面,性能并不是那么的流畅.如今,官方新扩展了一套脚本语言wxs,在IOS设备上运行,性能会比JS快2~20 ...
- 微信小程序-收货地址左滑删除
我参照了其中的部分代码,如:bindtouchstart,bindtouchmove,bindtouchend事件多数组中偏移值的更改, 在结合微信 movable-area 和 movable-vi ...
随机推荐
- python-day12(正式学习)
目录 可变长参数 可变长形参之* 可变长实参之* 可变长形参之** 可变长实参之** 可变长参数应用 命名关键字形参 函数对象 四大功能 引用 当作参数传给一个函数 可以当作函数的返回值 可以当作容器 ...
- Spark RDD理解-总结
1.spark是什么 快速.通用.可扩展的分布式计算引擎. 2. 弹性分布式数据集RDD RDD(Resilient Distributed Dataset),是Spark中最基本的数据抽象结构,表示 ...
- Java Web开发技术教程入门-初识动态网页
这段时间学校搞了一个"阅战阅勇"的阅读活动,奖品还是挺丰富的~于是,奔着这些奖品,我去图书馆借了这本<Java Web开发技术教程>.一是为了那些丰富的奖品,二是为了回 ...
- [..net core]4.入口,Main方法 及InProcess
通常控件台程序都有一个main方法, public class Program { public static void Main(string[] args) { CreateWebHostBuil ...
- IWorkspace pWorkspace = pWorkspaceFactory.OpenFromFile(Application.StartupPath + "\\temp", 0); 报:异常来自 HRESULT:0x80040228
原因:未添加License. 解决办法:在窗体中添加LicenseControl即可.如下图,License图标运行时不会显示.
- Python3零基础入门学习视频+源码+课件+习题-小甲鱼
目录 1. 介绍 2. 目录 3. 下载地址 1. 介绍 适用人群 完全零基础入门,不需要任何前置知识. 课程概述 本系列教程面向零基础的同学,是一个深入浅出,通俗易懂的Python3视频教程. 前半 ...
- 微软推出全新的Windows终端应用程序
微软正推出一款名为Windows Terminal的新命令行应用程序.它被设计为访问PowerShell,cmd.exe和Windows子系统Linux(WSL)等环境的中心位置.微软正在为想要调整终 ...
- Linux 开机文件系统发生错误
1 如果/目录没有损毁,那么开机的时候,屏幕会提示:press root password or ctrl +D,这个时候请输入root密码登陆系统,然后进行如下操作: 1)在光标处输入root密码登 ...
- 洛谷P1412 经营与开发题解
题目链接QWQ这里就不阐述了: 题解部分: 从题面上来看,这是个dp(递推)的题目. 但是dp要满足无后效性,但这个题为了取最值,得考虑从当前开始一直持续到结束的p的影响. 这让我们怎么满足无后效性? ...
- centos安装gitlab成果
centos安装gitlab成果 开始之前 在开始之前请先查看官方的刚需文档: https://github.com/gitlabhq/gitlabhq/blob/master/doc/install ...