小程序wepy踩坑之旅（三）----- 微信小程序wepy左滑删除特效源码

我写在了shop_cart.wepy里，源码就在下面注释很详细，直接拷贝到新建的.wpy就可以使用
这里写图片描述
<template>
  <view class="item-box">
    <view class="items">
      <repeat for="{{list}}" key="item">
        <view class="item">
<view @touchstart="ts" @touchmove="tm" @touchend="te" data-index="{{index}}" class="inner txt" style="{{item.txtStyle}}">{{item.txt}}</view>
        <view class="inner del" data-index="{{index}}" @tap="del">删除</view>
        </view>
      </repeat>
    </view>
  </view>
</template>

<script>
import wepy from 'wepy'

export default class ShopCart extends wepy.page {
  config = {
    navigationBarTitleText: '购物车'
  };
  components = {
  };

  mixins = [];

  data = {
    list: [
        {
          txtStyle:"",
          txt:"向左滑动可以删除"
        },
        {
          txtStyle:"",
          txt:"微信小程序|联盟（wxapp-union.com）"
        },
        {
          txtStyle:"",
          txt:"圣诞老人是爸爸，顺着烟囱往下爬，礼物塞满圣诞袜，平安糖果一大把"

        },
        {
          txtStyle:"",
          txt:"圣诞到来，元旦还会远吗？在圣诞这个日子里"
        },
        {
          txtStyle:"",
          txt:"圣诞节(Christmas或Cristo Messa ),译名为“基督弥撒”。"
        },
        {
          txtStyle:"",
          txt:"一年一度的圣诞节即将到来,姑娘们也纷纷开始跑趴了吧!"
        },
        {
          txtStyle:"",
          txt:"圣诞节(Christmas或Cristo Messa ),译名为“基督弥撒”。"
        },
        {
          txtStyle:"",
          txt:"你的圣诞节礼物准备好了吗?"
        },
        {
          txtStyle:"",
          txt:"一年一度的圣诞节即将到来,姑娘们也纷纷开始跑趴了吧!"
        },
        {
          txtStyle:"",
          txt:"圣诞到来，元旦还会远吗？"
        },
        {
          txtStyle:"",
          txt:"记下这一刻的心情"
        },
      ],
      delBtnWidth: 180 //单位rpx
  }

  computed = {}

  methods = {
    ts (e) { // 触摸开始
      let that = this
      if (e.touches.length === 1) {
        that.startX = e.touches[0].clientX
        console.log('startX---'+that.startX)
      }
    },
    tm (e) { // 触摸过程
      let that = this

      if (e.touches.length === 1) {
        //手指移动方向水平
        let moveX = e.touches[0].clientX // 这里的clientX获取的是屏幕可视区的坐标，其实是逻辑像素px,所以要用getEleWidth方法进行换算

        console.log('moveX---'+moveX)
        //手指起始点位置与移动期间的产值
        let disX = that.startX - moveX
        let txtStyle = ""
        if (disX === 0 || disX < 0) { // 往右移动或者没移动
          txtStyle = "left: 0px"
        }else if (disX > 0) { // 移动距离大于0
          txtStyle = "left:-" + disX + "px"
          if (disX >= that.delBtnWidth) { // 移动超过删除按钮的宽度
            txtStyle = "left:-" + that.delBtnWidth + "px"
          }
        }

        //获取手指触摸的是哪一项
        let index = e.target.dataset.index
        that.list[index].txtStyle = txtStyle
      }
    },
    te (e) { // 触摸结束
      let that = this
      if (e.changedTouches.length === 1) {
        //手指移动结束后水平位置
        let endX = e.changedTouches[0].clientX

        //触摸开始与结束，是指移动的距离
        let disX = that.startX - endX
        let delBtnWidth = that.delBtnWidth

        //如果距离小于删除按钮的1/2，不显示删除按钮
        let txtStyle = disX > delBtnWidth / 2 ? 'left:-'+ delBtnWidth + 'px': 'left:0px'
        //手指触摸的是哪一项
        let index = e.target.dataset.index

        that.list[index].txtStyle = txtStyle

      }
    },
    del () { // 删除

    }
  }

  events = {}
  initEleWidth () {
    let that = this
    that.delBtnWidth = that.getEleWidth(that.delBtnWidth)
    console.log(that.delBtnWidth)
  }

  getEleWidth (w) {  //获取元素自适应后的实际宽度（也就是根据设计稿宽度换算成px像素）
    let real = 0
    try {
      let resWidth = wx.getSystemInfoSync().windowWidth
      let scale = 750 / w
      real = Math.floor(resWidth / scale)
      return real
    }catch (e) {
      return false
    }
  }
  onLoad() {
    this.initEleWidth()
  }
}
</script>
<style>
view {
  box-sizing: border-box;
}

.item-box {
  margin: 0 auto;
  padding: 40rpx 0;
}

.items {
  width: 100%;
}

.item {
  position: relative;

  border-top: 2rpx solid#eee;

  height: 120rpx;

  line-height: 120rpx;

  overflow: hidden;
}

.item:last-child {
  border-bottom: 2rpx solid#eee;
}

.inner {
  position: absolute;

  top: 0;
}

.inner.txt {
  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;
}

.inner.del {
  background-color: #e64340;
  width: 180rpx;
  text-align: center;
  z-index: 4;
  right: 0;
  color: #fff;
}

.item-icon {
  width: 64rpx;
  vertical-align: middle;
  margin-right: 16rpx;
}
</style>
小程序wepy踩坑之旅（三）----- 微信小程序wepy左滑删除特效源码

猜你喜欢
