站长资源网络编程
vue swipeCell滑动单元格(仿微信)的实现示例
简介抽离Vant weapp滑动单元格代码改造而成带有拉动弹性回弹效果demo展示：https://littaotao.github.io/me/index（切换为浏览器调试的手机模式并且再次刷新一次）
抽离Vant weapp滑动单元格代码改造而成
带有拉动弹性回弹效果
demo展示：https://littaotao.github.io/me/index（切换为浏览器调试的手机模式并且再次刷新一次）
<template>
<div
class="cell_container"
@touchstart
v-click-outside="handleClickOutside"
@click="getClickHandler('cell')">
<div
:style="{'transform':
'translateX('+(offset+(isElastic">
<!-- <div ref="cellLeft" class="cell_left" @click="getClickHandler('left', true)">
<div>收藏</div>
<div>添加</div>
</div> -->
<div
@touchend="onClick()"
:class="offset">SwipeCell</div>
<div ref="cellRight"
class="cell_right"
@click="getClickHandler('right', true)">
<div
:class="type"
ref="remove"
:style="{'background':'#ccc','padding-left':'10px','padding-right':10+(isElastic">标记</div>
<div
:class="type"
ref="tag"
:style="{'transform': type">不再关注</div>
<div
:class="type"
:style="{'transform': type">删除</div>
</div>
</div>
</div>
</template>
<script>
import ClickOutside from 'vue-click-outside';
import { TouchMixin } from '@/components/mixins/touch';
export default{
name:"SwipeCell",
props: {
// @deprecated
// should be removed in next major version, use beforeClose instead
onClose: Function,
disabled: Boolean,
leftWidth: [Number, String],
rightWidth: [Number, String],
beforeClose: Function,
stopPropagation: Boolean,
name: {
type: [Number, String],
default: '',
},
//
type:{
type:[Number,String],
default:1 //0 常规 1 定位
},
isElastic:{ //弹性
type:Boolean,
default:true
}
},
data(){
return {
offset: 0,
dragging: true,
//-位移
elasticX:0,
removeWidth:0,
tagWidth:0,
cellRightWidth:0,
cellLeftWidth:0
}
},
computed: {
computedLeftWidth() {
return +this.leftWidth || this.getWidthByRef('cellLeft');
},
computedRightWidth() {
return +this.rightWidth || this.getWidthByRef('cellRight');
},
},
mounted() {
//防止弹性效果影响宽度
this.cellRightWidth = this.getWidthByRef('cellRight');
this.cellLeftWidth = this.getWidthByRef('cellLeft');
this.removeWidth = this.getWidthByRef('remove');
this.tagWidth = this.getWidthByRef('tag');
this.bindTouchEvent(this.$el);
},
mixins: [
TouchMixin
],
directives: {
ClickOutside
},
methods: {
getWidthByRef(ref) {
if (this.$refs[ref]) {
const rect = this.$refs[ref].getBoundingClientRect();
//type=1定位时获取宽度为0，为此采用获取子元素宽度之和
if(!rect.width){
let childWidth = 0;
for(const item of this.$refs[ref].children){
childWidth += item.getBoundingClientRect().width
}
return childWidth;
}
return rect.width;
}
return 0;
},
handleClickOutside(e){
if(this.opened) this.close()
},
// @exposed-api
open(position) {
const offset =
position === 'left' "stylus" scoped>
.cell_container{
position: relative;
overflow: hidden;
line-height: 68px;
height:68px;
div{
height: 100%;
.cell_content{
height: 100%;
width: 100%;
text-align: center;
}
.cell_content_active{
height: 100%;
width: 100%;
text-align: center;
&:active{
background: #e8e8e8;
}
}
.cell_left,.cell_right{
position: absolute;
top: 0;
height: 100%;
display: flex;
color: #fff;
.divPostion{
position: absolute;
}
div{
white-space:nowrap;
display: flex;
align-items: center;
background: #ccc;
}
}
.cell_left{
left: 0;
transform:translateX(-100%);
}
.cell_right{
right: 0;
transform:translateX(100%);
}
}
}
</style>
touch.js
import Vue from 'vue';
export const isServer=false;
const MIN_DISTANCE = 10;
const TouchMixinData = {
startX: Number,
startY: Number,
deltaX: Number,
deltaY: Number,
offsetX: Number,
offsetY: Number,
direction: String
};
function getDirection(x,y) {
if (x > y && x > MIN_DISTANCE) {
return 'horizontal';
}
if (y > x && y > MIN_DISTANCE) {
return 'vertical';
}
return '';
}
export let supportsPassive = false;
export function on(
target,
event,
handler,
passive = false
) {
if (!isServer) {
target.addEventListener(
event,
handler,
supportsPassive ? { capture: false, passive } : false
);
}
}
export const TouchMixin = Vue.extend({
data() {TouchMixinData
return { direction: '' } ;
},
methods: {
touchStart() {
this.resetTouchStatus();
this.startX = event.touches[0].clientX;
this.startY = event.touches[0].clientY;
},
touchMove() {
const touch = event.touches[0];
this.deltaX = touch.clientX - this.startX;
this.deltaY = touch.clientY - this.startY;
this.offsetX = Math.abs(this.deltaX);
this.offsetY = Math.abs(this.deltaY);
this.direction =
this.direction || getDirection(this.offsetX, this.offsetY);
},
resetTouchStatus() {
this.direction = '';
this.deltaX = 0;
this.deltaY = 0;
this.offsetX = 0;
this.offsetY = 0;
},
// avoid Vue 2.6 event bubble issues by manually binding events
// https://github.com/youzan/vant/issues/3015
bindTouchEvent( el ) {
const { onTouchStart, onTouchMove, onTouchEnd } = this;
on(el, 'touchstart', onTouchStart);
on(el, 'touchmove', onTouchMove);
if (onTouchEnd) {
on(el, 'touchend', onTouchEnd);
on(el, 'touchcancel', onTouchEnd);
}
},
},
});
引入即可！！！