小程序左滑删除

  
  
    
    
      
      
      
      {{item.name}}
      
      {{item.title}}
      
      活动时间:{{item.datas}}
    
    
    删除
  

/* 父级 */
page{
  background-color: #f5f5f5;
}

/* 外层视图 */
.cont{ 
  width: 100%; 
  margin: 0 auto; 
} 

.list{ 
  position: relative; 
  height: 170rpx; 
margin: 20rpx; 
border-radius: 10rpx;
  line-height: 170rpx; 
  overflow: hidden; 
} 
/* 删除外层包裹视图 */
.list_del{ 
  position: absolute; 
  top:0; 
} 
.list_del.txt{ 
  position: relative;
  background-color: #fff; 
  width: 100%; 
  z-index: 5; 
  padding:0 10rpx; 
  transition: left 0.2s ease-in-out; 
  white-space:nowrap; 
  overflow:hidden; 
  text-overflow:ellipsis; 
} 
/* 删除 */
.list_del.del{ 
  background-color: #e64340; 
  width: 180rpx;text-align: center; 
  z-index: 4; 
  right: 0; 
  color: #fff 
} 
/* 列表图片 */
.list_img{ 

   width: 105rpx;
  height: 105rpx;
   border-radius: 10rpx;
  vertical-align: middle; 
  margin-left: 15rpx;
 margin-top: -8rpx;
} 



 /* 列表名称 */
.list_name{
  position: absolute;
  left:168rpx;
  bottom:18rpx;
}
/* 列表标题 */
.list_title{
  position: absolute;
  right:155rpx;
  bottom:18rpx; 
  font-size: 13px;
  color: #818181;
}
/* 活动时间 */
.list_datas{
   position: absolute;
  left:168rpx;
  top:35rpx; 
  font-size: 13px;
  color: #818181;
}




   

// 默认声明一个函数记录list显示的数据---删除状态
var initdata = function (that) {
  var list = that.data.list
  for (var i = 0; i < list.length; i++) {
    list[i].shows = ""
  }
  that.setData({
    list: list
  })
}
var app = new getApp();
Page({
  data: {
    delBtnWidth: 185, //删除按钮宽度单位（rpx） 
    // 列表数据
    list: [{
      // 删除状态
      shows: "",
      // 列表中图片
      image: "https://6465-dev-be16e9-1255326756.tcb.qcloud.la/redux-bg/alter-bg/logo.jpg",
      // 昵称
      name: "菜鸟老五",
      // 简介title
      title: "主办方：小米科技",
      // 日期
      datas: "2017.02.21"
    },
    {
      shows: "",
      image: "https://6465-dev-be16e9-1255326756.tcb.qcloud.la/redux-bg/alter-bg/logo.jpg",
      name: "菜鸟老五",
      title: "主办方：小米科技",
      datas: "2017.02.21"
    },
    {
      shows: "",
      image: "https://6465-dev-be16e9-1255326756.tcb.qcloud.la/redux-bg/alter-bg/logo.jpg",
      name: "菜鸟老五",
      title: "主办方：小科技",
      datas: "2017.02.21"
    },
    {
      shows: "",
      image: "https://6465-dev-be16e9-1255326756.tcb.qcloud.la/redux-bg/alter-bg/logo.jpg",
      name: "菜鸟老五",
      title: "主办方：小米科技",
      datas: "2017.02.21"
    },
    {
      shows: "",
      image: "https://6465-dev-be16e9-1255326756.tcb.qcloud.la/redux-bg/alter-bg/logo.jpg",
      name: "菜鸟老五",
      title: "主办方：小米科技",
      datas: "2017.02.21"
    },

    ],

  },

  onLoad: function (options) {
    this.initEleWidth();
  },

  // 开始滑动事件
  touchS: function (e) {
    if (e.touches.length == 1) {
      this.setData({
        //设置触摸起始点水平方向位置 
        startX: e.touches[0].clientX
      });
    }
  },
  touchM: function (e) {
    var that = this;
    initdata(that)
    if (e.touches.length == 1) {
      //手指移动时水平方向位置 
      var moveX = e.touches[0].clientX;
      //手指起始点位置与移动期间的差值 
      var disX = this.data.startX - moveX;
      var delBtnWidth = this.data.delBtnWidth;
      // var txtStyle = "";
      if (disX == 0 || disX < 0) { //如果移动距离小于等于0，文本层位置不变 
        // txtStyle = "left:0px";
      } else if (disX > 0) { //移动距离大于0，文本层left值等于手指移动距离 
        // txtStyle = "left:-" + disX + "px";
        if (disX >= delBtnWidth) {
          //控制手指移动距离最大值为删除按钮的宽度 
          // txtStyle = "left:-" + delBtnWidth + "px";
        }
      }

    }
  },
  // 滑动中事件
  touchE: function (e) {
    if (e.changedTouches.length == 1) {
      //手指移动结束后水平位置 
      var endX = e.changedTouches[0].clientX;
      //触摸开始与结束，手指移动的距离 
      var disX = this.data.startX - endX;
      var delBtnWidth = this.data.delBtnWidth;
      //如果距离小于删除按钮的1/2，不显示删除按钮 
      var txtStyle = "";
      txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "px" : "left:0px";
      //获取手指触摸的是哪一项 
      var index = e.currentTarget.dataset.index;
      var list = this.data.list;
      list[index].shows = txtStyle;
      console.log("1", list[index].shows);
      //更新列表的状态 
      this.setData({
        list: list
      });
    } else {
      console.log("2");
    }
  },
  //获取元素自适应后的实际宽度 
  getEleWidth: function (w) {
    var real = 0;
    try {
      var res = wx.getSystemInfoSync().windowWidth;
      var scale = (750 / 2) / (w / 2); 
      // console.log(scale); 
      real = Math.floor(res / scale);
      return real;
    } catch (e) {
      return false;
      // Do something when catch error 
    }
  },
  initEleWidth: function () {
    var delBtnWidth = this.getEleWidth(this.data.delBtnWidth);
    this.setData({
      delBtnWidth: delBtnWidth
    });
  },
  //点击删除按钮事件 
  delItem: function (e) {
    var that = this;
    // 打印出当前选中的index
    console.log(e.currentTarget.dataset.index);
    // 获取到列表数据
    var list = that.data.list;
    // 删除
    list.splice(e.currentTarget.dataset.index, 1);
    // 重新渲染
    that.setData({
      list: list
    })
    initdata(that)
  }
})