Wxml代码：

<view class="container">
  <view class="msg_list">
    <view class="msg_item" wx:for="{{msgList}}" wx:for-index="index" wx:key="index">
      <movable-area>
        <movable-view out-of-bounds="true" direction="horizontal" x="{{item.xmove}}" inertia="true" data-index="{{index}}" bindtouchstart="handleTouchStart" bindtouchend="handleTouchEnd" bindchange="handleMovableChange">
          <view class="info_title">
            <view class="title_text">{{item.name}}</view>
            <view class="title_date">{{item.date}}</view>
          </view>
          <view class="info_desc">{{item.desc}}</view>
        </movable-view>
      </movable-area>
      <view class="item_opt">
        <view class="opt_top" data-index="{{index}}" bindtap="handlePinned">置顶</view>
        <view class="opt_del" data-id="{{item.id}}" bindtap="handleDeleteMsg">删除</view>
      </view>
    </view>
  </view>
</view>

Wxss代码：

.msg_list{padding: 0 32rpx;}
.msg_list .msg_item{position: relative;z-index: 999;box-sizing:border-box;}
.msg_list .msg_item movable-area{height: 80rpx;width: calc(100vw - 320rpx);padding: 36rpx 0;}
.msg_list .msg_item movable-view{height: 80rpx;width: calc(100vw - 64rpx);z-index: 999;background: #FFF;padding: 36rpx 0;}
.msg_item .info_title{display: flex;align-items: center;justify-content: space-between;}
.msg_item .info_title .title_text{font-size: 32rpx;color: #333;}
.msg_item .info_title .title_date{font-size: 24rpx;color: #999;}
.msg_item .info_desc{font-size: 28rpx;color: #666;}
.msg_item .item_opt{position: absolute;top: 0;bottom: 0;right: 0;z-index: 1;display: flex;width: 240rpx;}
.msg_item .item_opt .opt_top,.msg_item .item_opt .opt_del{width: 120rpx;display: flex;justify-content: center;align-items: center;color: #FFF;font-size: 28rpx;}
.msg_item .item_opt .opt_top{background-color: #B6B5B5;}
.msg_item .item_opt .opt_del{background-color: #E75D58;}

Js代码：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    msgList: [
      { id: 1, name: '1.运单状态提醒', desc: '预计将在12:00到达，请与货主联系', date: '1小时前' },
      { id: 1, name: '2.订单提醒', desc: '您有订单未发货，请尽快处理', date: '2小时前' },
      { id: 1, name: '3.JOJO', desc: '您好，我已在物流园A幢06号仓库', date: '1天前' }
    ]
  },

  /**
   * 显示按钮
   * @param {*} e 
   */
  showBtn(e){
    let index = e.currentTarget.dataset.index
    this.setXmove(index, -240)
  },

  /**
   * 隐藏按钮
   * @param {*} e 
   */
  hideBtn(e){
    let index = e.currentTarget.dataset.index
    this.setXmove(index, 0)
  },

  /**
   * 设置movable-view位移
   * @param {*} index 
   * @param {*} xmove 
   */
  setXmove(index, xmove){
    let msgList = this.data.msgList
    msgList[index].xmove = xmove
    this.setData({
      msgList: msgList
    })
  },

  /**
   * 处理movable-view移动事件
   * @param {*} e 
   */
  handleMovableChange(e){
    if (e.detail.source === 'friction') {
      if (e.detail.x < -30) {
        this.showBtn(e)
      } else {
        this.hideBtn(e)
      }
    } else if (e.detail.source === 'out-of-bounds' && e.detail.x === 0) {
      this.hideBtn(e)
    }
  },

  /**
   * 处理touchstart事件
   * @param {*} e 
   */
  handleTouchStart(e){
    this.startX = e.touches[0].pageX
  },

  /**
   * 处理touchend事件
   * @param {*} e 
   */
  handleTouchEnd(e){
    if(e.changedTouches[0].pageX < this.startX && e.changedTouches[0].pageX - this.startX <= -30) {
      this.showBtn(e)
    } else if(e.changedTouches[0].pageX > this.startX && e.changedTouches[0].pageX - this.startX < 30) {
      this.showBtn(e)
    } else {
      this.hideBtn(e)
    }
  },

  /**
   * 置顶
   * @param {*} e 
   */
  handlePinned(e){
    let index = e.currentTarget.dataset.index
    let msgList = this.data.msgList
    msgList.splice(0, 0, (msgList[index]))
    msgList.splice(index+1, 1)
    msgList.forEach((item, index) => {
      this.setXmove(index, 0)
    })
    this.setData({msgList})
  },
  
  /**
   * 删除消息
   * @param {*} e 
   */
  handleDeleteMsg(e){
    let id = e.currentTarget.dataset.id
    let msgList = this.data.msgList
    let index = msgList.findIndex(item => item.id === id)
    msgList.splice(index, 1)
    this.setData({ msgList })
  }

})