小程序怎么实现左滑操作

左滑

最近在开发一个小程序，其中有个需求需要对列表中每项均可实现左滑操作，在查看了官方文档之后，我发现官方的组件movable-view可以实现左滑功能，但是有个缺陷让我很抓狂，就是它需要列表中的每一项的高度都要是固定的，滚屋恩滚~~，我表示下我的无语。
怎么办，自己写吧，网上还是有一些例子的，但是有的运行不起来，我这个也是参考了别人的代码写出来的，适用于那种高度不固定，宽度固定的情况。
以下例子，左滑会出现删除按钮，实现删除该条目的操作。

// wxml
<view class="note-item" wx:for="{{noteList}}" wx:for-index="index" wx:key="{{item.id}}" >
   <view class="note-list-content" hover-class="none" hover-stop-propagation="false">
        <view class="movable-area">
            <view class="movable-view" style="transform: translateX({{item.xmove + 'rpx'}})" bindtap="modifyNote" bindlongpress="showDeleteModal" data-id="{{item.id}}" data-noteIndex="{{index}}" bindtouchstart="handleTouchStart" bindtouchend="handleTouchEnd" bindtouchmove="handleMovableChange"> 
                <view class="note-item-wrap">
                    <view class="note-movable-item">
                        <view class="note-movable-item-name"><text class="" wx:if="{{item.created_at != item.updated_at}}">修改于</text>{{item.time[3]}}:{{item.time[4]}}<text class="" wx:if="{{item.created_at != item.updated_at}}">{{',' + MONTH[item.time[1]] + ' '+item.time[2]+','+item.time[0]}}</text></view>
                        <view class="note-movable-item-code">{{item.content}}</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</view>

// scss
.note-item {
    margin: 0 45rpx 36rpx; 
 }

 .note-item .movable-area {
     min-height: 153rpx;
     width: calc(100vw - 280rpx - 45rpx);
 }

 .note-item .movable-view {
     min-height: 153rpx;
     width: calc(100vw - 90rpx);
     z-index: 999;
     background:rgba(247,248,250,1);
     border-radius:6rpx;
 }

 .note-item-wrap {
     position: relative;
     display: flex;
     align-items: center;
     box-sizing: border-box;
     padding: 16rpx 36rpx 36rpx;
 }

 .note-item-wrap .note-movable-item {
     flex: 1;
     overflow: hidden;
 }

 .note-item-wrap .note-movable-item-name {
     font-family: PingFangSC-Regular;
     font-size: 28rpx;
     font-weight:400;
     color:rgba(157,162,171,1);
     line-height: 70rpx;
     margin-right: 10rpx;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 }

 .note-item-wrap .note-movable-item-code {
     font-family:PingFangSC-Regular;
     font-size:30rpx;
     font-weight:400;
     color:#333333;
     line-height:44rpx;
     max-height:132rpx;
     overflow:hidden;
     text-overflow:ellipsis;
     word-break:break-all;
     -webkit-line-clamp:3;
     display:-webkit-box;
     -webkit-box-orient:vertical;

 }

 .note-item-wrap .note-movable-item-amount {
     flex: 0 0 auto;
     padding-right: 80rpx;
     position: relative;
 }

 .note-item-wrap .note-movable-item-amount .amount {
     width: 120rpx;
     font-size: 28rpx;
     color: #383A3D;
     line-height: 60rpx;
 }

 .note-item-wrap .note-movable-item-amount .unit {
     position: absolute;
     top: 0;
     right: 30rpx;
     font-size: 28rpx;
     color: #969AA3;
     line-height: 60rpx;
 }
 .modify-delete {
     position: absolute;
     top: 0;
     bottom: 0;
     right: 0;
     width: 115rpx;
     padding-right:10rpx;
     font-family: PingFangSC-Regular;
     font-size: 24rpx;
     color: #FFFFFF;
     line-height: 120rpx;
     z-index: 1;
     background: #FFFFFF;
     text-align: center;
     display: flex;
     justify-content: flex-end;
     align-items:center;
     view{
         width:68rpx;
         height:68rpx;
         background:rgba(255,255,255,1);
         box-shadow:0px 4rpx 30rpx 0px rgba(31,31,32,0.1);
         border-radius:50%;
         display:flex;
         align-items:center;
         justify-content:center;

     }
     .image-modify, .image-delete{
         width:35rpx;
         height:33rpx;
     } 
 }

/**
     * 显示删除按钮
     */
    showDeleteButton: function (e) {
        let noteindex = e.currentTarget.dataset.noteindex
        this.setXmove(noteindex, -115)  
    },

    /**
     * 隐藏删除按钮
     */
    hideDeleteButton: function (e) {
        let noteindex = e.currentTarget.dataset.noteindex
        this.setXmove(noteindex, 0)
    },

    /**
     * 设置movable-view位移
     */
    setXmove: function (noteindex, xmove) {
        let noteList = this.data.noteList;
        noteList[noteindex].xmove = xmove
        this.setData({
            noteList: noteList
        })
    },

    /**
     * 处理movable-view移动事件
     */
    handleMovableChange: function (e) {
        let x = e.touches[0].pageX - this.startX;
        this.setXmove(e.currentTarget.dataset.noteindex, x);
    },

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

    /**
     * 处理touchend事件
     */
    handleTouchEnd(e) {
        if (e.changedTouches[0].pageX < this.startX && e.changedTouches[0].pageX - this.startX <= -35) {
            // 左滑
            this.showDeleteButton(e)
        } else if (e.changedTouches[0].pageX > this.startX && e.changedTouches[0].pageX - this.startX < 30) {
            // 右滑
            this.showDeleteButton(e)
        } else {
            this.hideDeleteButton(e)
        }
    }