专栏首页.NET开发那点事微信小程序列表项滑动显示删除按钮

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

微信小程序并没有提供列表控件,所以也没有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
            });
        }

    }
);

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

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

    微信小程序并没有提供列表控件,所以也没有iOS上惯用的列表项左滑删除的功能,SO只能自己干了。 原理很简单,用2个层,上面的层显示正常的内容,下面的层显示一个删...

    kklldog
  • 使用RazorEngine对ASP.NET MVC的Views进行UnitTest

    有的时候我们需要对Razor最后生产的文本(HTML OR XML OR..)进行单元测试。 使用Nuget安装RazorEngine。 新建一个ASP.NET...

    kklldog
  • ASP.NET Core 对Controller进行单元测试

    单元测试对我们的代码质量非常重要。很多同学都会对业务逻辑或者工具方法写测试用例,但是往往忽略了对Controller层写单元测试。我所在的公司没见过一个对Con...

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

    微信小程序并没有提供列表控件,所以也没有iOS上惯用的列表项左滑删除的功能,SO只能自己干了。 原理很简单,用2个层,上面的层显示正常的内容,下面的层显示一个删...

    kklldog
  • Android 透明状态栏(伪沉浸式)

    而由于 Android API 的不同,需要考虑 4.4、5.0、6.0 前后的不同。

    七适散人
  • 数据访问层的使用方法

    数据访问层的使用方法。 数据访问层的使用方法 一、操作语句部分 简单的说就是传入一个操作语句,然后接收返回值就可以了。为了简化代码和提高效率,所以呢设置了五种返...

    用户1174620
  • TypeScript 1.6发布:完全支持React/JSX

    2012年,微软推出了一个能够在Node.js上运行的开源语言——TypeScript。作为JavaScript的超集,TypeScript在兼容JavaScr...

    逸鹏
  • 编写graphql服务

    graphql用一种高效清晰的规范来替代目前正流行的RESTful架构。通过灵活的结构化查询语言让查询更高效,静态类型和规范提升前后端联调效率。作为一名前端我非...

    IMWeb前端团队
  • 编写graphql服务

    graphql用一种高效清晰的规范来替代目前正流行的RESTful架构。通过灵活的结构化查询语言让查询更高效,静态类型和规范提升前后端联调效率。作为一名前端我非...

    IMWeb前端团队
  • 3186 队列练习 2

    3186 队列练习 2 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description (此题...

    attack

扫码关注云+社区

领取腾讯云代金券