基于小程序wepy框架左滑动删除
<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 = wepy.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>
---------------------
作者：做一个帅气的程序员
来源：CSDN
原文：https://blog.csdn.net/qq_29329037/article/details/80509954
版权声明：本文为博主原创文章，转载请附上博文链接！
