展示效果圖直接上代碼

<view
 v-for="(item, index) in arr"
 :key="item.id"
 @touchstart="touchstart($event)"
 @touchmove="touchmove(index, $event)"
 :class="['touch-item', item.isTouchMove ? 'touch-move-active' : '']"
>
 <view class="content">
   <view class="date_flex">
     <view>
       <text class="date">{{ item.data }}</text>
       <text class="quantity">{{ item.text }}</text>
     </view>
     <view>
       <u-switch space="2" v-model="value" activeColor="#FFDA00" size="40" inactiveColor="rgb(230, 230, 230)"></u-switch>
     </view>
   </view>
   <view class="bottom_date">1, 2, 3, 4</view>
 </view>
 <view class="del" @tap="del(index)">
  <view class="detail">
    <view class="detail_img">
      <img :src="require('@/static/images/detail.png')" alt="">
    </view>
    <view class="detail_text">刪除</view>
  </view>
</view>
</view>

如果要修改里面內(nèi)容直接從content這個(gè)類修改就行。

export default {
  data() {
    return {
      arr: [
        { id: '1', data: '12:00', text: '1份', isTouchMove: false },
        { id: '2', data: '12:00', text: '1份', isTouchMove: false },
      ],
      startX: 0, //開始坐標(biāo)
      startY: 0,
    };
  },
  methods: {
    touchstart(e) {
      console.log('start', e);
      //開始觸摸時(shí) 重置所有刪除
      this.arr.forEach((v, i) => {
        if (v.isTouchMove)
          //只操作為true的
          v.isTouchMove = false;
      });
      this.startX = e.changedTouches[0].clientX;
      this.startY = e.changedTouches[0].clientY;
    },

    //滑動(dòng)事件處理
    touchmove: function (indexNum, target) {
      let that = this,
        index = indexNum, //當(dāng)前索引
        startX = that.startX, //開始X坐標(biāo)
        startY = that.startY, //開始Y坐標(biāo)
        touchMoveX = target.changedTouches[0].clientX, //滑動(dòng)變化坐標(biāo)
        touchMoveY = target.changedTouches[0].clientY, //滑動(dòng)變化坐標(biāo)
        //獲取滑動(dòng)角度
        angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });
      that.arr.forEach(function (v, i) {
        v.isTouchMove = false;
        //滑動(dòng)超過(guò)30度角 return
        if (Math.abs(angle) > 15) return;
        if (i == index) {
          if (touchMoveX > startX)
            //右滑
            v.isTouchMove = false;
          //左滑
          else v.isTouchMove = true;
        }
      });
    },
    /**
     * 計(jì)算滑動(dòng)角度
     * @param {Object} start 起點(diǎn)坐標(biāo)
     * @param {Object} end 終點(diǎn)坐標(biāo)
     */
    angle: function (start, end) {
      var _X = end.X - start.X,
        _Y = end.Y - start.Y;
      //返回角度 /Math.atan()返回?cái)?shù)字的反正切值
      return (360 * Math.atan(_Y / _X)) / (2 * Math.PI);
    },
    //刪除事件
    del: function (index) {
      this.arr.splice(index, 1);
    },
  },
};

.touch-item {
  font-size: 28rpx;
  display: flex;
  justify-content: space-between;
  width: 100%;  // 少一個(gè)會(huì)看到按鈕
  overflow: hidden;
  margin-top: 40rpx;
}
.content {
  width: 100%;
  padding: 20rpx;
  line-height: 44rpx;
  margin-right: 0;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transform: translateX(90px);
  transform: translateX(90px);
  margin-left: -154rpx;
  .date_flex {
    display: flex;
    justify-content: space-between;
    .date {
      font-size: 40rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      margin-right: 49rpx;
    }
    .quantity {
      font-size: 24rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ff9200;
    }
  }
  .bottom_date {
    margin-top: 10rpx;
  }
}
.del {
  background-color: orangered;
  width: 180rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  -webkit-transform: translateX(90px);
  transform: translateX(90px);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  .detail {
   .detail_img {
     text-align: center;
      img {
        width: 30rpx;
        height: 30rpx;
      }
    }
    .detail_text {
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
    }
  }
}
.touch-move-active .content,
.touch-move-active .del {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

直接復(fù)制粘貼就行。拿上直接用。
如果遇到滑動(dòng)會(huì)導(dǎo)致上下抖動(dòng)用這個(gè)解決。給最外層得一個(gè)view標(biāo)簽加一個(gè)樣式。

.rev {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  overflow: hidden;
}

這樣的話滑動(dòng)會(huì)有陰影，但不會(huì)抖動(dòng)，可以嘗試一下看看，如果哪位能人能解決，就麻煩分享一下了 。在此謝過(guò)。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-514511.html

到了這里，關(guān)于微信小程序、uniapp使用touchstart和touchmove左右滑動(dòng)刪除。以及解決上下抖動(dòng)問(wèn)題。的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！