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

　 短视频，自媒体，达人种草一站服务

这篇文章主要介绍了vue swipeCell滑动单元格(仿微信)的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

抽离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?elasticX:0))+'px)','transition-duration':dragging?'0s':'0.6s'}">
   <!-- <div ref="cellLeft" @click="getClickHandler('left', true)">
    <div>收藏</div>
    <div>添加</div>
   </div> -->
   <div
    @touchend="onClick()"
    :class="offset?'cell_content':'cell_content_active'">SwipeCell</div>
   <div ref="cellRight"
    class="cell_right"
    @click="getClickHandler('right', true)">
    <div
     :class="type?'divPostion':''"
     ref="remove"
     :style="{'background':'#ccc','padding-left':'10px','padding-right':10+(isElastic?Math.abs(elasticX/3):0)+'px','transition-duration':dragging?'0s':'0.6s'}">标记</div>
    <div
     :class="type?'divPostion':''"
     ref="tag"
     :style="{'transform': type?'translateX('+(-offset*removeWidth/cellRightWidth-(isElastic?elasticX/3:0))+'px)':'','padding-left':'10px','padding-right':10+(isElastic?Math.abs(elasticX/3):0)+'px','transition-duration':dragging?'0s':'0.6s','background':'#000'}">不再关注</div>
    <div
     :class="type?'divPostion':''"
     :style="{'transform': type?'translateX('+(-offset*(removeWidth+tagWidth)/cellRightWidth-(isElastic?elasticX/3*2:0))+'px)':'','padding-left':'10px','padding-right':10+(isElastic?Math.abs(elasticX/3):0)+'px','transition-duration':dragging?'0s':'0.6s'}">删除</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' ? this.computedLeftWidth : -this.computedRightWidth;

this.opened = true;
   this.offset = offset;

（编辑：辽源站长网）

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