vue之flex布局实现左滑删除

标签：column   center   完全   hit   滑动   index   rtm   pac   无法   

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() {

  }
}

vue之flex布局实现左滑删除

标签：column   center   完全   hit   滑动   index   rtm   pac   无法   

原文地址：https://www.cnblogs.com/jessie-xian/p/11572229.html