小程序——左滑删除

最新推荐文章于 2024-04-01 16:30:40 发布

baijian10

最新推荐文章于 2024-04-01 16:30:40 发布

阅读量115

点赞数

文章标签：小程序

本文链接：https://blog.csdn.net/baijian10/article/details/105121470

版权

官方文档
https://developers.weixin.qq.com/miniprogram/dev/component/movable-area.html
左滑删除功能
movable-area
movable-view
当movable-view小于movable-area时，只能在movable-area内部移动
当movable-view大于movable-area时，移动范围必须包含movable-area（X，Y方向分开考虑）
direction：移动方向，有all、vertical、horizontal、none
x：定义x轴方向的偏移
wxml：

<view class="cell">
  <movable-area class="cell_movearea">
    <movable-view class="cell_moveview" 
    direction="horizontal" 
    x="{{isOpen?'-150rpx':'0'}}"
    bindtouchstart="_moveTouchStart"
    bindtouchend="_moveTouchEnd">
      zheshiyhige cell
    </movable-view>
  </movable-area>
  <button type="warn" class="cell_btn">删除</button>
</view>

wxss

.cell{
height: 100rpx;
width: 750rpx;
display: flex;
}
.cell .cell_movearea{
height: 100rpx;
flex: 1;
background-color: tomato;
}
.cell .cell_movearea .cell_moveview{
height: 100rpx;
width: 750rpx;
background-color: cyan;
z-index: 99;
}
.cell .cell_btn{
height: 100rpx;
width: 150rpx;
line-height: 100rpx;
border-radius: 0px;
}

let touchStart=0;
Page({
  _moveTouchStart:function(evt){
    // console.log(evt);
    touchStart = evt.changedTouches[0].pageX;
  },
  _moveTouchEnd:function(evt){
    // console.log(evt);
    let touchEnd = evt.changedTouches[0].pageX;
    let cha = touchEnd - touchStart;
    if(cha<-40){
      this.setData({
        isOpen:true
      })
    }else if(cha>40){
      this.setData({
        isOpen: false
      })
    }else{
      this.setData({
        isOpen: this.data.isOpen
      })
    }
  },

  /**
   * 页面的初始数据
   */
  data: {
    isOpen:false
  },
}）