vue swipeCell滑动单元格(仿微信)的实现示例

if (this.opened && !this.lockClick) {
    if (this.beforeClose) {
     this.beforeClose({
      position,
      name: this.name,
      instance: this,
     });
    } else if (this.onClose) {
     this.onClose(position, this, { name: this.name });
    } else {
     this.close(position);
    }
   }
  },

getClickHandler(position, stop) {
   return (event) => {
    if (stop) {
     event.stopPropagation();
    }
    this.onClick(position);
   };
  },
 }
}
</script>
<style lang="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);
  }
 },
 },
});

引入即可！！！

到此这篇关于vue swipeCell滑动单元格(仿微信)的实现示例的文章就介绍到这了,更多相关vue swipeCell滑动单元格内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

（编辑：辽源站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!