微信小程序左滑删除未操作有复位效果

Posted 2022-08-12 fps2tao

 

1、wxml

<!--pages/test/test.wxml-->
<view class="page">

<movable-area class="m_a" wx:for="plist" wx:key="*this" wx:for-index="id" >
  <movable-view class="data_list" direction="horizontal" inertia="true"  x="item.leftx" out-of-bounds="true"  bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" data-index="id" >

   <view  class="d_box">
    <view class="data">item.title</view>
    <view>删除</view>
   </view>
  </movable-view>
</movable-area>

</view>

2.wxss

/* pages/test/test.wxss */
.page
  width: 100vw;
  height: 100vh;

.m_a
  width: 100%;
  height: 200rpx;
  border: 1rpx solid gray; 

.data_list
  height: 200rpx;
  width: 120%;
  border: 1rpx solid red;

.d_box
  display: flex;
  justify-content: flex-start;
  justify-items: center;
  height: 100%;

.data
  width: 100vw;
  background: red;

3.js

// pages/test/test.js
Page(

  /**
   * 页面的初始数据
   */
  data: 
    plist: [ "title": "内容内容13131", "leftx": 0 ,  "title": "asdasd内容13131", "leftx": 0 ,  "title": "a是sd内容13131", "leftx": 0 ,  "title": "as水电费多个d内容13131", "leftx": 0 ],
    pcontrolWidth: 200,
  ,

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) 

  ,

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () 

  ,

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () 

  ,

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () 

  ,


  /**
     * 触摸开始
     */
  touchS: function (e) 
    let index = e.currentTarget.dataset.index;
    //遍历复位
    this.data.plist.forEach(function (item, key) 
      if (key != index) 
        item.leftx = 0;
      

    );
    //复位后,赋值
    this.setData(
      plist: this.data.plist,
    );

    if (e.touches.length == 1) 
      this.setData(
        //设置触摸起始点水平方向位置
        startX: e.touches[0].clientX
      );
    


  ,
  /**
   * 触摸移动
   */
  touchM: function (e) 
    console.log(e);
    let index = e.currentTarget.dataset.index;
    var endX = e.touches[0].clientX;
    var disX = this.data.startX - endX;
    var pcontrolWidth = this.data.pcontrolWidth;
    var left = 0;
    if (disX <= 0) 
      left = 0;
     else if (disX > 0) 
      left = disX;
      if (disX >= pcontrolWidth) 
        //控制手指移动距离最大值为删除按钮的宽度
        left = pcontrolWidth;
      
    

    this.data.plist[index].leftx = -left;
    this.setData(
      plist: this.data.plist,
    );
    console.log(this.data.plist);

  ,
  /**
   * 触摸结束
   */
  touchE: function (e) 

  


)