微信小程序列表项滑动显示删除按钮

微信小程序并没有提供列表控件，所以也没有iOS上惯用的列表项左滑删除的功能，SO只能自己干了。

原理很简单，用2个层，上面的层显示正常的内容，下面的层显示一个删除按钮，就是记录手指滑动的距离，动态的来移动上层元素，当然上层用绝对定位。

wxml：

<view class="container">

  <view class="record-box" data-datetime="{{record.datetime}}" wx:for="{{detailList}}" wx:for-item="record">

    <view class="record" style="left:{{record.offsetX}}px" bindtouchstart="recordStart" catchtouchmove="recordMove" bindtouchend="recordEnd">

      <view class="left">

        <view>{{record.type}} {{record.count+record.unit}}</view>

        <view class="summary">{{record.remark}}</view>

      </view>

      <view class="right">

        {{record.datetime}}

      </view>

    </view>

    <view class="delete-box">

      <view>删除</view>

    </view>

  </view>

</view>

　　wxss：

@import "../common/weui.wxss";

.container {

  box-sizing: border-box;

  padding: 0 0 0 0;

}

.record {

  display: flex;

  flex-direction: row;

  align-items: center;

  width:100%;

    height: 120rpx;

  position: absolute;

  justify-content: space-between;

  background-color: #fff;

}

.record .right{

  margin-right: 30rpx;

     color: #888888;

}

.record .left{

  margin-left: 30rpx;

    display: flex;

    flex-direction: column;

  justify-content: space-between;

}

.record .left .summary{

    color: #aaa;

  font-size: 30rpx;

  line-height: 30rpx;

}

.record-box{

  height: 120rpx;

  width: 100%;

  border-bottom: 1rpx solid #ddd;

  background-color: #fff;

}

.delete-box{

  background-color: #e64340;

  color: #ffffff;

  float: right;

  height: 100%;

  width: 80px;

  display: flex;

  align-items: center;

  justify-content: center;

}

.record-box:last-child {

  border-bottom: 0;

}

.record .r-item {

}

var detailList = [

    { datetime: '2017-01-01 17:00', count: 100, unit: 'ml', type: '开水', remark: '哈哈哈哈' },

    { datetime: '2017-01-01 17:01', count: 100, unit: 'ml', type: '开水' },

    { datetime: '2017-01-01 17:02', count: 100, unit: 'ml', type: '开水' }

];

var recordStartX = 0;

var currentOffsetX = 0;

Page(

    {

        data: {

            detailList: detailList

        }

        ,

        recordStart: function (e) {

            recordStartX = e.touches[0].clientX;

            currentOffsetX = this.data.detailList[0].offsetX;

            console.log('start x ', recordStartX);

        }

        ,

        recordMove: function (e) {

            var detailList = this.data.detailList;

            var item = detailList[0];

            var x = e.touches[0].clientX;

            var mx = recordStartX - x;

            console.log('move x ', mx);

            var result = currentOffsetX - mx;

            if (result >= -80 && result <= 0) {

                item.offsetX = result;

            }

            this.setData({

                detailList: detailList

            });

        }

        ,

        recordEnd: function (e) {

            var detailList = this.data.detailList;

            var item = detailList[0];

            console.log('end x ', item.offsetX);

            if (item.offsetX < -40) {

                item.offsetX = -80;

            } else {

                item.offsetX = 0;

            }

            this.setData({

                detailList: detailList

            });

        }

    }

);

巴特西

微信小程序列表项滑动显示删除按钮

最新文章

热门文章