[小程序]- 列表左滑置顶删除功能

一、效果

【wxml】

 <view wx:if="{{msgGroup.length > 0}}">
      <message-box pType="im" data="{{item}}" wx:for="{{msgGroup}}" wx:key="{{item.groupID}}" bind:touchS="touchS" bind:touchE="touchE" bind:touchM="touchM" leftRange="{{leftRange}}" startX="{{startX}}" moveX="{{moveX}}" InfoId="{{InfoId}}" />
    </view>

<view class="msg-container">
  <view class="msg-item" bind:tap="onClick" data-path="{{data.uri}}" style="margin-left: {{InfoId == data.conversationID ? '-'+ leftRange +'rpx': '' }}" data-item="{{data}}" bindtouchstart="onClickS" bindtouchmove="onClickM" bindtouchend="onClickE">
    <image class="left-img" src="{{data.image || data.avatar}}" />
    <view class="right-con">
      <view class="top-con">
        <view class="title">{{data.title || data.name}}</view>
        <view class="time" wx:if="{{isShowTime && data.message_time != 0}}">
          {{data.message_time}}
        </view>
        <image class="topStatus" wx:if="{{isShowTime && isPinned}}" src="https://staticscdn.zgzpsjz.com/miniprogram/images/wyl/yupao_mini_icon_up_masa_13x.png" />
      </view>
      <view class="down-con">
        <view class="dtop">{{data.desc}}</view>
        <view class="ddown {{data.show_number > 9 ? 'ddown-more' : ''}}" wx:if="{{pTyoe == 'im' ? isShowTime && data.show_number > 0 && data.groupProfile.selfInfo.messageRemindType != 'discard' : isShowTime && data.show_number > 0}}">
          <text>{{data.show_number > 99 ? '99+' : data.show_number}}</text>
        </view>
        <image class="discardImg" wx:if="{{data.groupProfile.selfInfo.messageRemindType == 'discard'}}" src="https://staticscdn.zgzpsjz.com/miniprogram/images/wyl/yupao_mini_icon_x85rtrx.png" />
      </view>
    </view>
  </view>
  <!-- 这里是左滑按钮部分----start -->
  <view class='isMove' wx:if="{{isShowTime && leftRange && InfoId == data.conversationID}}" bindtap="moveItem" hidden='{{!data.isMove}}'>
    <view class="commonBanner operateTop" catchtap="top">
      <image class="contentImg operateTopImg" src="https://staticscdn.zgzpsjz.com/miniprogram/images/wyl/yupao_mini_icon_xx_sc9trtrx.png" />
      <text class="contentText operateTopText">置顶</text>
    </view>
    <view class="commonBanner operateDel" catchtap="del">
      <image class="contentImg operateDelImg" src="https://staticscdn.zgzpsjz.com/miniprogram/images/wyl/yupao_mini_icon_xx_sc3trtrx.png" />
      <text class="contentText operateDelText">删除聊天</text>
    </view>
  </view>
  <!-- 这里是左滑按钮部分----end -->
</view>

 【less】

.msg-container {
  display: flex;
  flex-direction: row;
  .msg-item {
    width: 750rpx;
    height: 144rpx;
    background-color: #FFF;
    border: 0;
    box-sizing: border-box;
    padding: 24rpx 32rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left-img {
      display: block;
      width: 96rpx;
      height: 96rpx;
      border-radius: 16rpx;
      object-fit: cover;
    }
    .right-con {
      flex:1;
      height: 96rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      margin-left: 24rpx;
      .top-con {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        .title {
          flex:1;
          height: 48rpx;
          max-width: 448rpx;
          line-height: 48rpx;
          font-size: 32rpx;
          color: rgba(0, 0, 0, 0.85);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-weight: bold;
        }
        .time {
          width: 188rpx;
          height: 40rpx;
          line-height: 40rpx;
          font-size: 24rpx;
          color: rgba(0, 0, 0, 0.45);
          text-align: right;
        }
        .topStatus {
          z-index: 99;
          position: absolute;
          right:-32rpx;
          top:-24rpx;
          width: 40rpx;
          height: 40rpx;
        }
      }
      .down-con {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .dtop {
          flex:1;
          max-width: 448rpx;
          height: 44rpx;
          line-height: 44rpx;
          font-size: 28rpx;
          color: rgba(0, 0, 0, 0.45);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-weight: bold;
        }
        .ddown {
          min-width: 30rpx;
          height: 30rpx;
          line-height: 30rpx;
          font-size: 20rpx;
          background-color: #F74742;
          text-align: center;
          border-radius: 50%;
          color: #FFF;
          font-weight: bold;
          margin-right: 4rpx;
        }
        .ddown-more {
          border-radius: 30rpx;
          padding: 0rpx 8rpx;
        }
        .discardImg {
          width: 48rpx;
          height: 48rpx;
        }
      }
    }
  }
  .isMove {
    max-width: 288rpx;
    height: 144rpx;
    display: flex;
    justify-content: flex-start;
    .commonBanner {
      position: relative;
      width: 144rpx;
      height: 100%;
      background-color: #0092FF;
      color: rgba(255, 255, 255, 0.95);
      .contentImg {
        position: absolute;
        top: 32rpx;
        left: 48rpx;
        width: 48rpx;
        height: 48rpx;
      }
      .contentText {
        position: absolute;
        bottom: 14rpx;
        left: 0rpx;
        font-size: 24rpx;
        height: 40rpx;
        line-height: 40rx;
        width: 144rpx ;
        text-align: center;
      }
    }
    .operateTop {
      background-color: #0092FF;
    }
    .operatehaveTop {
      background-color: #8796A2;
    }
    .operateDel {
      background-color: #F74742;
    }
  }
}

【父组件ts】

import { MapStateToData, connectPage } from '@/store/index'
import { dateTransformation, msgTypeTransformation } from './utils'

const mapStateToData: MapStateToData = () => {
  return {}
}

Page(
  connectPage(mapStateToData)({
    /** 页面的初始数据 */
    data: {
      topGroup: [],
      suggestGroup: [],
      systemGroup: [],
      msgGroup: [],
      leftRange: 0, // 移动的范围
      startX: 0, // 首次点击的位置
      moveX: 0, // 滑动时的距离
      InfoId: '',
    },

    /** 初始化获取数据 */
    async initData() {
      const res = await wx.$.fetch['GET/message/message/messageIconList']()
      const topList = res.data?.tops
      let newTopList = []
      if (topList?.length > 0) {
        newTopList = topList.map((item: any) => {
          return { ...item, message_time: dateTransformation(item?.message_time) }
        })
      }

      // 请求IM消息列表的接口
      wx.$.tim
        .getConversationList()
        .then((imResponse) => {
          if (imResponse.data.conversationList) {
            let newConversationList = []
            newConversationList = imResponse.data.conversationList?.map((item: any) => {
              return { ...item, message_time: dateTransformation(item?.lastMessage?.lastTime), desc: msgTypeTransformation(item?.lastMessage) }
            })
            this.setData({
              msgGroup: newConversationList,
            })
            console.log(this.data.msgGroup) // 群组列表
          }
        })
        .catch((imError) => {
          console.warn('getGroupList error:', imError) // 获取群组列表失败的相关信息
        })

      this.setData({
        topGroup: res.data?.lists,
        suggestGroup: res.data?.suggest,
        systemGroup: newTopList,
      })
    },

    /** 生命周期函数--监听页面加载 */
    onLoad() {},

    /** 生命周期函数--监听页面显示 */
    onShow() {
      this.initData()
    },

    // 左滑删除
    touchS(el) {
      const e = el.detail.element
      const { item } = el.detail
      // 更新初始值
      this.setData({
        leftRange: 0,
      })
      // startX记录开始移动的位置
      if (e.touches.length === 1) {
        this.setData({
          startX: e.touches[0].clientX,
        })
      }
      // 移动列表某个 防止v-for循环整体循环
      this.setData({
        InfoId: item.conversationID,
      })
    },
    touchM(el) {
      const e = el.detail
      // 滑动时判断是否为初始值
      if (this.data.leftRange === 375) {
        return
      }
      if (e.touches.length === 1) {
        // 手指移动时水平方向位置
        this.setData({
          moveX: e.touches[0].clientX,
        })
        // 判断移动的距离是变大变小 变大便是右移
        if (this.data.startX < this.data.moveX) {
          // 更改移动时的距离。防止弹出删除按钮
          this.setData({
            moveX: 0,
          })
        } else {
          // 移动的距离 加 20 如需调整 可以调整这里
          this.setData({
            leftRange: 288,
          })
        }
      }
    },
    touchE() {
      // 如果滑动的距离大于45  则直接弹出删除按钮
      if (this.data.moveX > 45) {
        this.setData({
          leftRange: 288,
        })
      }
      // 松开后刷新 滑动的距离
      this.setData({
        moveX: 0,
      })
    },

    
  }),
)

Component({
  properties: {
    /** 组件用途类型 */
    pType: {
      type: String,
      value: 'common',
    },
    /** 父组件传的：文字，图片等 */
    data: {
      type: Object,
    },
    /** 是否显示时间 */
    isShowTime: {
      type: Boolean,
      value: true,
    },
    onClickCon: {
      type: Function,
    },
    /** 移动的距离 */
    leftRange: {
      type: Number,
      value: 0,
    },
    /** 移动的距离 */
    InfoId: {
      type: String || Number,
      value: '',
    },
  },
  methods: {
    onClick(e) {
      this.triggerEvent('click', { path: e.currentTarget.dataset.path })
    },
    onClickS(element) {
      const { item } = element.currentTarget.dataset
      this.triggerEvent('touchS', { element, item })
    },
    onClickM(e) {
      this.triggerEvent('touchM', e)
    },
    onClickE(e) {
      this.triggerEvent('touchE', e)
    },
  },
})