小程序左右滑动事件

wxml

<view class="list_item" bindtouchstart="touchS" bindtouchend="touchE" data-index="{{index}}" data-id="{{item.read_flag}}" data-content="{{item.content}}" style="width:{{item.list_item}}%;border-radius:{{item.radius}};"></view>

js

// 开始滑动事件
  touchS: function(e) {
    if (e.touches.length == 1) {
      this.setData({
        //设置触摸起始点水平方向位置 
        startX: e.touches[0].clientX
      });
    }
  },
  // 滑动中事件
  touchE: function(e) {
    if (e.changedTouches.length == 1) {
      //手指移动结束后水平位置 
      var endX = e.changedTouches[0].clientX;
      //触摸开始与结束,手指移动的距离 
      var disX = this.data.startX - endX;
      //获取手指触摸的是哪一项 
      var index = e.currentTarget.dataset.index;
      var noticeList = this.data.noticeList;
      var i = this.data.index;
      console.log(i, 'iiiiii', this.data.index != '', this.data.index != index, this.data.index == 0)
      if (disX > 15) {
        noticeList[index].list_item = 73;
        // noticeList[index].radius = "10px 0px 0px 10px";
        noticeList[index].noticetitle = 65;
        noticeList[index].noticecontent = 1.5;
        noticeList[index].flag = true;
        if (this.data.index!='null' && this.data.index!=index){
          noticeList[this.data.index].list_item = '';
          noticeList[this.data.index].radius = "";
          noticeList[this.data.index].noticetitle = '';
          noticeList[this.data.index].noticecontent = '';
          noticeList[this.data.index].flag = false;
        }
      } else if (disX < 0) {
        noticeList[index].list_item = '';
        noticeList[index].radius = "";
        noticeList[index].noticetitle = '';
        noticeList[index].noticecontent = '';
        noticeList[index].flag = false;
      }
      //更新列表的状态 
      this.setData({
        noticeList: noticeList,
        noticeId: e.currentTarget.dataset.id,
        noticeContent: e.currentTarget.dataset.content,
        index: index
      });
    } else {
      console.log("2");
    }
  },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值