微信小程序实现侧滑

最新推荐文章于 2023-08-09 11:39:54 发布

苘迷

最新推荐文章于 2023-08-09 11:39:54 发布

阅读量489

点赞数

分类专栏：前端文章标签：小程序

原文链接：https://www.mk2048.com/blog/blog.php?id=h0bi1hckhihj&title=%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%AE%9E%E7%8E%B0%E4%BE%A7%E6%BB%91

版权

前端专栏收录该内容

734 篇文章 1 订阅

订阅专栏

先上效果图

↓ ↓ ↓ ↓ ↓ ↓

滑动之前

滑动之后

觉得效果图不错的朋友请继续往下看

↓ ↓ ↓ ↓ ↓ ↓

先上一段html代码

<view class="touch-item {{isTouchMove ? 'touch-move-active' : ''}}" bindtouchstart="touchstart" bindtouchmove="touchmove" >
　　<navigator class="content" hover-class="none">
　　　　<image class="item_img" src="../image/image1.png" />
　　　　<view class="item_title">德国Nestl&#233;雀巢BEBA贝巴适度水解奶粉3段（10个月以上）800g</view>
　　</navigator>
　　<view class="del" catchtap="del" >删除</view>
</view>

下面是css

.touch-item {
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  width: 100%;
  overflow: hidden;
}

.content {
  width: 100%;
  padding: 10px;
  margin-right: 0;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transform: translateX(90px);
  transform: translateX(90px);
  margin-left: -90px;
  background-color: #fff;
}

.item_img {
  float: left;
  width: 100rpx;
  height: 100rpx;
  vertical-align: middle;
}

.item_title {
  padding-right: 25rpx;
  line-height: 200%;
  font-size: 28rpx;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  padding-left: 20rpx;
}

.del {
  background-color: orangered;
  width: 90px;
  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;
}

.touch-move-active .content, .touch-move-active .del {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

//手指触摸动作开始 记录起点X坐标
  touchstart: function (e) {
    //开始触摸时 重置样式，并记录触摸位置
    this.setData({
      startX: e.changedTouches[0].clientX,
      startY: e.changedTouches[0].clientY,
      isTouchMove : this.data.isTouchMove ? !this.data.isTouchMove : this.data.isTouchMove; 
    })
  },
  //滑动事件处理
  touchmove: function (e) {
     var that = this,
      startX = that.data.startX,//开始X坐标
      startY = that.data.startY,//开始Y坐标
      touchMoveX = e.changedTouches[0].clientX,//滑动变化坐标
      touchMoveY = e.changedTouches[0].clientY,//滑动变化坐标
      //获取滑动角度
      angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });
      var isTouchMove 
      //滑动超过30度角 return
      if (Math.abs(angle) > 30) return;
        if (touchMoveX > startX){ //右滑
           isTouchMove = false 
        }else{ //左滑
          isTouchMove = true
        }
    //更新数据
    that.setData({
      isTouchMove : isTouchMove 
    })
  },
  /**
   * 计算滑动角度
   * @param {Object} start 起点坐标
   * @param {Object} end 终点坐标
   */
  angle: function (start, end) {
    var _X = end.X - start.X,
      _Y = end.Y - start.Y
    //返回角度 /Math.atan()返回数字的反正切值
    return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
  }