小程序侧滑删除加点击切换tab

不喜欢多说，直接上代码

1.页面

<!--pages/PDCA/PDCAHomeList/PDCAHomeList.wxml-->
<view class="tab_top">
  <view class="tab_top_item {{tabArr.curHdIndex=='0'? 'active' : ''}}" id="0" data-id="0" bindtap="tab">待发布</view>
  <view class="tab_top_item {{tabArr.curHdIndex=='1'? 'active' : ''}}" id="1" data-id="1" bindtap="tab">被退回</view>
  <view class="tab_top_item {{tabArr.curHdIndex=='2'? 'active' : ''}}" id="2" data-id="2" bindtap="tab">已发布</view>
  <view class="tab_top_item {{tabArr.curHdIndex=='3'? 'active' : ''}}" id="3" data-id="3" bindtap="tab">已关闭</view>
</view>

<view class="tab_bottom">
  <!-- 待发布s -->
  <view class="tab_bottom_item {{tabArr.curBdIndex=='0'? 'active' : ''}}">
    <scroll-view scroll-y="true" class='roll' style="height:{{winHeight-70}}px">
      <view wx:for="{{items}}" wx:key="{{index}}">
        <movable-area class='movable_area'>
          <movable-view direction="horizontal" class='movable_view'>
            <view class="touch-item {{item.isTouchMove ? 'touch_move_active' : ''}}" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove">
              <view class="list_item">
                <image class="list_item_pic" src="{{item.icon}}"></image>
                <view class="list_item_fr">
                  <view class="list_item_title">{{item.title}}</view>
                  <view class="list_item_explain">{{item.measures}}</view>
                  <view class="list_item_txt">
                    <view class="list_item_time">2019-07-12/07-20</view>
                  </view>
                </view>
              </view>
              <view class="operation">
                <view class="eidt" catchtap="eidt" data-index="{{index}}">
                  <image src="/images/edit_white.png"></image>
                  <text>编辑</text>
                </view>
                <view class="del" catchtap="del" data-index="{{index}}">
                  <image src="/images/del_white.png"></image>
                  <text>删除</text>
                </view>
              </view>
            </view>
          </movable-view>
        </movable-area>
      </view>
    </scroll-view>
  </view>
  <!-- 被退回s -->
  <view class="tab_bottom_item {{tabArr.curBdIndex=='1'? 'active' : ''}}">被退回</view>
  <!-- 已发布s -->
  <view class="tab_bottom_item {{tabArr.curBdIndex=='2'? 'active' : ''}}">已发布</view>
  <!-- 已关闭s -->
  <view class="tab_bottom_item {{tabArr.curBdIndex=='3'? 'active' : ''}}">已关闭</view>
</view>

2、样式

/* pages/PDCA/PDCAHomeList/PDCAHomeList.wxss */

/* tab s */

.tab_top {
  width: 100%;
  border-bottom: 2rpx solid #f7f7f7;
  line-height: 80rpx;
  display: flex;
  background-color: #fff;
}

.tab_top_item {
  width: 150rpx;
  text-align: center;
}

.tab_top .active {
  width: 150rpx;
  text-align: center;
  color: #006bdb;
  border-bottom: 6rpx solid #006bdb;
}

.tab_bottom .tab_bottom_item {
  display: none;
}

.tab_bottom .tab_bottom_item.active {
  display: block;
}

/* tab e */

/* 侧滑删除s */

.movable_area {
  width: 100%;
  height: 184rpx;
  overflow: hidden;
}

.movable_view {
  width: 100%;
  height: 100%;
}

.touch-item {
  font-size: 28rpx;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f7f7f7;
  width: 100%;
  overflow: hidden;
  background-color: #fff;
}

.list_item {
  width: 100%;
  padding: 20rpx;
  line-height: 44rpx;
  margin-right: 0;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transform: translateX(300rpx);
  transform: translateX(300rpx);
  margin-left: -300rpx;
  display: flex;
}

.list_item_pic {
  height: 100rpx;
  width: 100rpx;
}

.list_item_fr {
  width: calc(100% - 120rpx);
  margin-left: 20rpx;
}

.list_item_title {
  width: 100%;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.list_item_explain {
  width: 100%;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  color: #a6a6a6;
  font-size: 24rpx;
}

.list_item_txt {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  margin-top: 10rpx;
}

.list_item_time {
  font-size: 20rpx;
  color: #a6a6a6;
}

.list_item_name {
  margin-right: 5rpx;
}

.operation {
  width: 300rpx;
  display: flex;
  color: #fff;
  -webkit-transform: translateX(300rpx);
  transform: translateX(300rpx);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  text-align: center;
  line-height: 100%;
}

.touch_move_active .list_item, .touch_move_active .operation {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.eidt {
  width: 150rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f19a38;
}

.eidt image {
  height: 40rpx;
  width: 40rpx;
}

.eidt text {
  line-height: 60rpx;
}

.del {
  width: 150rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #eb4e3d;
}

.del image {
  height: 40rpx;
  width: 40rpx;
}

.del text {
  line-height: 60rpx;
}

/* 侧滑删除e */

3、js

// pages/PDCA/PDCAHomeList/PDCAHomeList.js
var app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {

    /**
     * 页面配置
     */
    winWidth: 0,
    winHeight: 0,

    // tab 切换
    tabArr: {
      curHdIndex: 0,
      curBdIndex: 0,
    },

    items: [],
    startX: 0, //开始坐标
    startY: 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var that = this;
    /**
     * 获取系统信息
     */
    wx.getSystemInfo({
      success: function(res) {
        that.setData({
          winWidth: res.windowWidth,
          winHeight: res.windowHeight
        });
      }
    });
    that.TemporaryData();
  },

  //tab切换
  tab: function(e) {
    var that = this;
    var dataId = e.currentTarget.id;
    var obj = {};
    obj.curHdIndex = dataId;
    obj.curBdIndex = dataId;
    this.setData({
      tabArr: obj
    })
    if (dataId == 0) {
      that.tempData();
    }
  },
  
  //临时数据
  TemporaryData: function() {
    var items = [{
        icon: "/images/PDCA1.png",
        title: "计划：这个星期设计好ui！",
        measures: "措施：根据不同功能设计不同样式！"
      },
      {
        icon: "/images/PDCA2.png",
        title: "问题：页面样式出错了！",
        measures: "措施：查找原因！"
      },
    ];

    this.setData({
      items: items
    });
  },

  /************************************************** 侧滑删除s*****************************************/
  //手指触摸动作开始 记录起点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
    })
  },
  /************************************************** 侧滑删除e*****************************************/
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

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

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

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

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})