Implémentation de la fonction de suppression de l'applet WeChat à gauche

Cet article présente principalement les informations pertinentes sur la mise en œuvre de la fonction de suppression coulissante à gauche du mini programme WeChat. Les amis dans le besoin peuvent se référer à

La mise en œuvre de la fonction de suppression coulissante à gauche du mini-programme WeChat. Mini programme WeChat

Rendu d'implémentation :

Code d'implémentation :

1. wxml touch-item L'élément est lié à bindtouchstart, événements bindtouchmove

<view class="container">
 <view class="touch-item {{item.isTouchMove ? &#39;touch-move-active&#39; : &#39;&#39;}}" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove" wx:for="{{items}}" wx:key="">
  <view class="content">{{item.content}}</view>
  <view class="del" catchtap="del" data-index="{{index}}">删除</view>
 </view>
</view>

2, mise en page wxss flex, animation css3

.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;
 line-height: 22px;
 margin-right:0;
 -webkit-transition: all 0.4s;
 transition: all 0.4s;
 -webkit-transform: translateX(90px);
 transform: translateX(90px);
 margin-left: -90px
}
.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);
}

3 Les commentaires js sont très détaillés

var app = getApp()
Page({
 data: {
  items: [],
  startX: 0, //开始坐标
  startY: 0
 },
 onLoad: function () {
  for (var i = 0; i < 10; i++) {
   this.data.items.push({
    content: i + " 向左滑动删除哦,向左滑动删除哦,向左滑动删除哦,向左滑动删除哦,向左滑动删除哦",
    isTouchMove: false //默认全隐藏删除
   })
  }
  this.setData({
   items: this.data.items
  })
 },
 //手指触摸动作开始 记录起点X坐标
 touchstart: function (e) {
  //开始触摸时 重置所有删除
  this.data.items.forEach(function (v, i) {
   if (v.isTouchMove)//只操作为true的
    v.isTouchMove = false;
  })
  this.setData({
   startX: e.changedTouches[0].clientX,
   startY: e.changedTouches[0].clientY,
   items: this.data.items
  })
 },
 //滑动事件处理
 touchmove: function (e) {
  var that = this,
   index = e.currentTarget.dataset.index,//当前索引
   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 });
  that.data.items.forEach(function (v, i) {
   v.isTouchMove = false
   //滑动超过30度角 return
   if (Math.abs(angle) > 30) return;
   if (i == index) {
    if (touchMoveX > startX) //右滑
     v.isTouchMove = false
    else //左滑
     v.isTouchMove = true
   }
  })
  //更新数据
  that.setData({
   items: that.data.items
  })
 },
 /**
  * 计算滑动角度
  * @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);
 },
 //删除事件
 del: function (e) {
  this.data.items.splice(e.currentTarget.dataset.index, 1)
  this.setData({
   items: this.data.items
  })
 }
})

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment implémenter une barre de progression circulaire en temps réel dans l'applet WeChat

Applet WeChat Mise en place du suivi des gestes glissants pour changer de page

Analyse de onLoad dans l'applet WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!