vue之flex布局实现左滑删除

Posted 2022-11-26 jessie-xian

html部分：

  <div class="equipmentContent">
        <div class="cell" v-for="(item,index) in [1,2,3,4]" :key="index">
          <div
            class="cell-info"
            :style="currentIndex==index?styleObject:''"
            @touchstart="handleTouchStart($event, index)"
            @touchmove="handleTouchMove($event, index)"
            @touchend="handleTouchEnd($event, index)"
          >
            <div class="cell-info-detail">
              <div class="equipment">Xiao Mi MI 6X</div>
              <div class="useTime">19-08-03 13:51:50</div>
            </div>
          </div>
          <div class="cell-delete" @click="deleteEquipment(item)">删除</div>
        </div>
        
      </div>

css部分：

 .equipmentContent 
      .px2rem(34);
      padding-left: @px2rem;
      padding-right: @px2rem;
      background-color: #fff;
      box-sizing: border-box;

      .cell 
        overflow: hidden;
        display: flex;
        align-items: center;
        width: 100%;
        .px2rem(122);
        height: @px2rem;
        border-bottom: 1px solid #F0F0F0;

        .cell-info 
          display: flex;
          width: 100%;
          flex-shrink: 0;

        

        .cell-info-head 
          box-sizing: border-box;
          /* 设置为IE盒模型 */
          width: @px2rem;
          height: @px2rem;
        

        .cell-info-head 
          .px2rem(10);
          padding: @px2rem;
        

        .cell-info-detail 
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          .px2rem(18);
          padding: @px2rem 0;

          .equipment,
          .useTime 
            .px2rem(40);
            height: @px2rem;
            font-family: PingFangSC;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            line-height: @px2rem;
          

          .equipment,
          .useTime 
            .px2rem(28);
            font-size: @px2rem;
            text-align: left;
          

          .useTime 
            color: rgba(153, 153, 153, 1);
            .px2rem(5);
            margin-top: @px2rem;
          
        

        .cell-read 
          display: flex;
          align-items: center;
          .px2rem(80);
          width: @px2rem;
          background-color: #ccc;
        

        .cell-delete 
          .px2rem(118);
          width: @px2rem;
          background-color: #EA6557;
          height: 59px;
          background: rgba(234, 101, 87, 1);
          border-radius: 4px;
        

        .cell-delete 
          .px2rem(59);
          height: @px2rem;
          font-family: PingFangSC;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
          line-height: @px2rem;
        

        .cell-delete 
          .px2rem(28);
          font-size: @px2rem;
        

        img 
          .px2rem(55);
          width: @px2rem;
          height: @px2rem;
        

        img 
          .px2rem(5);
          border-radius: @px2rem;
        

        span 
          width: 0;
          /* 宽度为0 */
          .px2rem(18);
          font-size: @px2rem;
          white-space: nowrap;
          margin-left: 5%;
          /* 这里一定要用百分比，不然会撑出高度，无法完全缩放为0 */
        
      
    

js部分：

export default 
  name: 'aiXunIDlogined',
  data() 
    return 
      startTx: 0, // 开始滑动的x值
      endTx: 0, // 滑动后的x值
      distanceX: 0, // 滑动距离，在touchmove中动态赋值为endTx - startTx
      startMarginLeft: 0, // 开始滑动时的margin-left值
      marginLeft: 0,
    
  ,
  components: 
   
  ,
  computed: 

    bodyheight() 
      let height = 0;
      let innerHeight = window.innerHeight;
      let restheight = innerHeight - height - hotcss.rem2px(5.674, window.innerWidth);
      return restheight;
    ,
    // 用于实时更新“信息详情”的margin-left值
    styleObject: function () 
      return 
        marginLeft: this.marginLeft + 'px'
      
    

  ,
  watch: 

  ,
  created() ,
  methods: 
    handleTouchStart(e, index) 
      if(this.currentIndex!==index)
        this.marginLeft=0;
      
      this.currentIndex = index;
      this.startTx = e.touches[0].clientX
      this.startMarginLeft = this.marginLeft
    ,
    handleTouchMove(e, index) 
      if (index == this.currentIndex) 
        this.endTx = e.changedTouches[0].clientX
        this.distanceX = this.startTx - this.endTx // 滑动距离
        this.marginLeft = this.startMarginLeft - this.distanceX
        // console.log(this.marginLeft,'9989999999999990')
        if (this.marginLeft > 0) 
          this.marginLeft = 0
        
        if (this.marginLeft < -118) 
          this.marginLeft = -118
        
      

    ,
    handleTouchEnd(e, index) 
      // console.log(e)
      console.log(index)
      if (index == this.currentIndex) 
        if (this.marginLeft > -30)  // margin-left大于-60px则收起
          this.marginLeft = 0
         else 
          this.marginLeft = -60 // 否则展开
        
      

    ,
    // 点击删除设备
    deleteEquipment(item) 
      console.log("要删除的设备", item)
    
  ,
  mounted()