微信小程序滑动删除

效果图


wxml

<!-- 顶部菜单按钮 -->
<view class="tui-tabbar-content">
   <view class="tui-tab fs15">
      <text data-id="0" bindtap="changeTabbar" class="tui-tab-cell {{index == 0 ? 'tui-active' : ''}}">报警消息</text>
      <text data-id="1" bindtap="changeTabbar" class="tui-tab-cell {{index == 1 ? 'tui-active' : ''}}">系统消息</text>
   </view>
</view>
<!-- 消息list内容 -->
<view class='w100P'>
   <view class="fv b-d_1e w100P {{item.isTouchMove ? 'item-active' : ''}} p-r10 p-l10 h80" wx:for='{{msgList}}' wx:key="index" style='position:relative' data-index="{{index}}"  bindtouchstart='touchstart' bindtouchmove='touchmove'>
      <view class='fv txt w100P' bindtap='toDetail' data-index="{{index}}">
         <image src='{{item.headUrl}}' class='h40 w40 b-r5 m-r10'></image>
         <text class='h6 w6 b-r100 bc_e16 readShow' wx:if='{{item.isRead==0}}'></text>
         <view class='fs13 w90P'>
            <view class="fv w100P">
               <text class='c_000 text_elli fs15 b w60P'>{{item.nickName}}</text>
               <text class='text_elli fs12 c_999 w80P t-a_r p-r20'>{{item.crtTime}}</text>
            </view>
            <view class='c_666 text_elli m-t10'>{{item.content}}</view>
         </view>
      </view>
      <view class='del h80 fs18 t-a_c c_fff' bindtap="del" data-index="{{index}}">删除</view>
   </view>
</view>
<!-- 加载到最后或者没有数据时显示 -->
<view class="bottom" wx:if="{{!hint}}">
   <view class='span'></view>
   <view class='round'></view>
   <text decode>&emsp;没有更多了&emsp;</text>
   <view class='round'></view>
   <view class='span'></view>
</view>

wxss

/* 01home/02product/05collectProduct/collectProduct.wxss */
.collectList:last-of-type{
   border-bottom: none!important;
}
.bottom {
   font-size: 16px;
   padding: 10px 0;
   color: gray;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
}
.span {
   width: 50px;
   height: 1px;
   background: gray;
}

.round {
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background: gray;
}

.tui-tab{
  border: 1px solid #1CA2FC;
  border-radius: 3px;
  overflow: hidden;
  width: 100%;
  display: table;
  table-layout: fixed;
  color: #1CA2FC;
}
.tui-tab-cell{
  display: table-cell;
  width: 100%;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 13px;
  text-align: center;
}
.tui-tab-cell:not(:last-child){border-right: 1px solid #1CA2FC;}
.tui-tab-cell.tui-active{background-color: #1CA2FC;color: #fff;}
.tui-tab-cell:not(:last-child){border-right: 1px solid #1CA2FC;}
.tui-tab-cell.tui-active{background-color: #1CA2FC;color: #fff;}
.readShow{
   position:absolute;
top:3px;
left:10%;
}

.txt{
  margin-right:0;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  transform: translateX(90px); 
  margin-left: -90px; 
}
.del{
  background-color: #c23531;
  width: 90px;
  line-height: 80px;
  transform: translateX(90px);
  transition: all 0.4s;   
}
.item-active .txt, .item-active .del{
  transform: translateX(0); 
}

.fv {
  display: flex;
  align-items: center;
}

js

// 03admin/21SendOutGoods/3dShopOder/3dShopOder.js
var co = require('../../../../resource/js/common.js')
var app = getApp()
var _this, _data, _groupsId, _msgType=2
Page({
   data: {
      index: 0,
      //订单列表
      msgList: [],
      //是否隐藏显示底部提示
      hint: true,
      //frame高度
      frame_h: 1800,
      pageNo: 1,
      deviceWidth: '',
   },
   onLoad: function (opt) {
      _this = this;
      _data = this.data;
      console.log(opt)
      if (opt.groupsId){
         _groupsId = opt.groupsId.split(",")
      }
      _this.setData({
         frame_h: wx.getSystemInfoSync().windowHeight + 10,
      })
   },
   onShow: function () {
      _this.setData({
         msgList: [],
         pageNo: 1,
         hint: true
      })
      _this.setData({
         deviceWidth: wx.getSystemInfoSync().windowWidth
      })
      _this.getMsgListList()

   },
   onUnload: function () {
      _data.pageNo = 1
   },
   onReachBottom: function () {
      _this.getMsgListList()
   },

   //获取订单列表
   getMsgListList: function () {
      wx.showLoading({
         title: '正在加载数据中...',
      })
      var param = {
         pageNo: _data.pageNo,
         msgType: _msgType,
         pageSize: 10,
         performType:'WS',
         token:app.Data.healthWatchInfo.token
      }
      co.getKkApi('watch/Watchmg/getUserMessage', param, function (res) {
         wx.hideLoading()
         if (res.code == 0) {
            if(res.data.length==0){
               _this.setData({
                  hint: false
               })
            }
            var list = _data.msgList.concat(res.data)
            _this.setData({
               msgList: list
            })
            _data.pageNo++
         } else {
            _this.setData({
               hint: false
            })
            co.toastAllText(res.msg)
         }
      })
   },
   //点击tab切换
   changeTabbar(e) {
      _data.pageNo = 1
      var tabId = e.currentTarget.dataset.id
      _msgType = tabId == 0 ? 2 : 1
      if (_data.index == tabId) {
         return false;
      } else {
         _this.setData({
            index: tabId,
            msgList: [],
            hint: true
         })
      }
      _this.getMsgListList()

   },
   toDetail(e){
      if (_msgType==2){
         var index = e.currentTarget.dataset.index
         var msgList = _data.msgList[index]
         var list={
            crtTime: msgList.crtTime,
            // content: msgList.content,
            // headUrl: msgList.headUrl,
            lat: msgList.lat,
            lon: msgList.lon,
            nickName: msgList.nickName
         }
         console.log(list)
         wx.navigateTo({
            url: '/01home/05/MyHealthyWatch/groupInfo/addSecurityFence/addSecurityFence?pageType=xiaoxi' + "&msgList=" + JSON.stringify(list) + '&content=' + msgList.content + "&headUrl=" + msgList.headUrl,
         })
      }
     
   },
   touchstart: function (e) {
      this.setData({
         startX: e.changedTouches[0].clientX,
         startY: e.changedTouches[0].clientY
      })
   },
   touchmove: function (e) {
      let index = e.currentTarget.dataset.index,//当前索引
         startX = _data.startX,//开始X坐标
         startY = _data.startY,//开始Y坐标
         touchMoveX = e.changedTouches[0].clientX,//滑动变化坐标
         touchMoveY = e.changedTouches[0].clientY,//滑动变化坐标
         //获取滑动角度
         angle = this.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });
         console.log(_data.msgList)
      _data.msgList.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
         }
      })
      // //更新数据
      this.setData({
         msgList: _data.msgList
      })
   },

   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) {
      wx.showModal({
         title: '提示',
         content: '确定要删除？',
         success: (res) => {
            if (res.confirm) {
               let listItem = _data.msgList[e.currentTarget.dataset.index]
               _data.msgList.splice(e.currentTarget.dataset.index, 1)
               this.setData({ msgList: _data.msgList })
            } else if (res.cancel) {
               console.log('用户点击取消')
            }
         }
      })
   }
})

说明：1、其中引入的commen.js是统一写的调用后台接口获取数据的方法，可改成自己的
2、有些样式是引用公共的样式就没有贴出来了，如：fs13–>font-size:13px;

h6–>height:6px

w100P–>width:100%

b-r5 -->border-radius:5px

m-r10 -->margin-right:10px

bc_e16 --> background-color:#ee1616

c_66 --> color:#666;
text_elli -->{ text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
display:inline-block;}

p-r20 --> padding-right:20px;

t-a_r --> text-align:right;

m-t10 --> margin-top:10px;

参考：https://blog.csdn.net/abs625/article/details/81324320