左滑动删除效果

最新推荐文章于 2023-09-02 21:38:11 发布

菜中的菜?

最新推荐文章于 2023-09-02 21:38:11 发布

阅读量146

点赞数 1

文章标签：前端 javascript

本文链接：https://blog.csdn.net/qianduanxiaocai/article/details/126653262

版权

本人小菜,记录遇见的值得复用的,方便以后遇见直接CV就是这么干脆,哈哈,最近写了个小程序项目,收货地址左滑动删掉效果,话不多说,直接上代码,写的不好,轻喷

效果:

html:

<view>
  <view class="item_contaner {{isMove?'move-left':''}}" bindtouchstart="touchStart" bindtouchend="touchEnd">
    <view class="item_content ">商品</view>
    <view class="delete_btn">删除</view>
  </view>
</view>

css:

.item_contaner {
  width: 870rpx;
  height: 100rpx;
  display: flex;
  transition: all .3s;
}

.item_content {
  width: 750rpx;
  height: 100rpx;
  background: #5696ff;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  font-size: 50rpx;
  color: #fff;
  text-align: center;
  line-height: 100rpx;

}

.delete_btn {
  width: 120rpx;
  height: 100rpx;
  text-align: center;
  line-height: 100rpx;
  background-color: red;
  color: white;
}

.move-left {
  margin-left: -120rpx;
}

js:

Page({
  data: {
    isMove: false, //是否滑动,
    startX: '' //初始位置
  },
  // 滑动开始
  touchStart(e) {
    let startX = e.changedTouches[0].clientX
    this.setData({
      startX
    })
  },
  // 滑动结束
  touchEnd(e) {
    let startX = this.data.startX
    let endX = e.changedTouches[0].clientX
    var isMove=false
    if (endX < startX) {
       isMove = true
    }
    this.setData({
      isMove
    })
  },
})