快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

微信小程序实现列表项滑动显示删除按钮的功能

微信小程序 实现列表项滑动显示删除按钮的功能

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:空间域名、雅安服务器托管、营销软件、网站建设、李沧网站维护、网站推广。

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

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

wxml:


 
  
   
    {{record.type}} {{record.count+record.unit}}
    {{record.remark}}
   
   
    {{record.datetime}}
   
  
  
   删除
  
 

 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 {
  
}
  

JS代码:

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
      });
    }

  }
);

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!


文章标题:微信小程序实现列表项滑动显示删除按钮的功能
标题路径:http://6mz.cn/article/pjjesj.html

其他资讯