Fügen Sie den Effekt eines Wischens nach links hinzu, um der Liste eine Schaltfläche zum Löschen anzuzeigen, die häufig in ähnlichen Situationen wie Einkaufswagen angezeigt wird. Diesen Effekt werden wir heute gemeinsam erreichen. Basierend auf Uniapp ist das h5-Ende dasselbe
<template>
<view class="list-item">
<!-- 滑动容器 -->
<view
class="swipe-container"
@touchstart="onTouchStart"
@touchmove="onTouchMove"
@touchend="onTouchEnd"
:style="{transform:‘translateX(’+moveX+'px)}"
>
<!-- 列表项内容 -->
<view class="content">
<!-- 列表项内容 -->
<!-- ... -->
测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容
</view>
<!-- 删除选项 -->
<!-- <view v-if="showDeleteOption" class="delete-option" :style="deleteOptionStyle" @click="deleteItem">
删除
</view> -->
<view class="delete-option" @click="deleteItem">
删除
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
startX: 0, // 记录触摸起始位置
moveX: 0, // 记录横向位移
showDeleteOption: false,
isAnimating: false,
delBtnWidth:100,
distance:0
};
},
methods: {
onTouchStart(event) {
// 记录触摸起始位置
this.startX = event.touches[0].clientX;
},
onTouchMove(event) {
// 计算横向位移
this.moveX = event.touches[0].clientX - this.startX;
console.log("movex",this.moveX)
if(this.moveX>=0){
this.moveX=0
}else{
if(this.moveX<-this.delBtnWidth/2){
this.moveX=-this.delBtnWidth
}
}
},
onTouchEnd() {
if(this.moveX<0){
if(Math.abs(this.moveX)<this.delBtnWidth/2){
this.moveX=0
}else{
this.moveX=-this.delBtnWidth
}
}
},
}
}
</script>
<style>
.swipe-container {
position: relative;
height: 100%;
/* overflow: hidden;
*/ touch-action: pan-y; /* 允许垂直方向滚动 */
transition: all 0.5s;
}
.delete-option {
position: absolute;
top: 0;
right: -100px;
height: 100%;
width: 100px;
background-color: red;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
transition: opacity 0.3s;
}
.content {
height: 100%;
padding-right: 100px; /* 设置内容右侧距离为删除选项的宽度 */
}
</style>Hier führen wir nur einen Löschvorgang durch Wischen mit der linken Maustaste für eine einzelne Option durch, aber für die Liste müssen wir einige Änderungen an den Daten vornehmen:
<view class="message_list">
<view class="item" v-for="(item, index) in list" :key="index">
<view class="time_name">时间段（{
{index+1}}）</view>
<view class="time_item"
@touchstart="drawStart($event,item)"
@touchmove="drawMove($event,item)"
@touchend="drawEnd($event,item)"
:style="{transform:'translateX('+item.moveX+'px)'}"
>
<view class="item_cont">
<view class="start_item" >
<view class="start_item_title">开始时间</view>
<view @click="triggerTime(item)">{
{item.startTime||"--"}}</view>
</view>
<view class="end_item" >
<view class="end_item_title">结束时间</view>
<view @click="triggerTime(item)">{
{item.endTime||"--"}}</view>
</view>
</view>
<view class="del_item" @click="triggerDelItem(item,index)">删除</view>
</view>
</view>
</view>Dann schauen Sie sich unseren js-Code an:
export default {
data(){
return {
list:[
{id:"001",timebName:"时间段",startTime:"10:00",endTime:"14:00",moveX:0},
{id:"002",timebName:"时间段",startTime:"9:00",endTime:"15:00",moveX:0},
{id:"003",timebName:"时间段",startTime:"11:00",endTime:"18:00",moveX:0},
],
curLang: Vue.config.lang,
curTimeItem:{
startTime:"",
endTime:"",
},
hours: Array.from({ length: 24 }, (_, i) => i),
minutes: Array.from({ length: 60 }, (_, i) => i),
timeValue: [8, 30],
isShowPicker:false,
delBtnWidth: 60,
startX:0,
moveX:0,
visible:false
}
},
methods:{
i18nCast,
drawStart(e){
this.startX=e.touches[0].clientX;
console.log("this.startx",this.startX)
},
drawMove(e,item){
item.moveX=e.touches[0].clientX-this.startX;
if(item.moveX>=0){
item.moveX=0
}else{
if(item.moveX<=-this.delBtnWidth/2){
item.moveX=-this.delBtnWidth
}
}
},
drawEnd(e,item){
if(item.moveX<0){
if(Math.abs(item.moveX)<this.delBtnWidth/2){
item.moveX=0
}else{
item.moveX=-this.delBtnWidth
}
}
console.log("t抬起：",item.moveX)
},
}Zum Schluss hier noch unser CSS-Code:
、
.time_item{
display: flex;
padding: 3.2vw 0 3.2vw 5.3333vw;;
box-sizing: border-box;
position: relative;
background: #fff;
transition: all 0.2s ease-in;
.item_cont{
padding-right: 32vw;
height: 100%;
// width: calc(100% - 60px);
display: flex;
width: 100%;
.start_item,.end_item{
width: 50%;
}
.start_item_title,.end_item_title{
font-size: 3.7333vw;
font-style: normal;
font-weight: 400;
line-height: 5.3333vw;
}
}
.del_item{
width: 16vw;
height: 100%;
background-color: #FF5F3D;
color: white;
position: absolute;
top: 0;
right:-16vw;
font-size: 3.7333vw;
font-weight: 400;
line-height: 5.3333vw;
display: flex;
justify-content: center;
align-items: center;
}
}
Natürlich können wir diesen Effekt auch durch Positionierung erzielen:
<template>
<view class="SwipeActionBox">
<view v-for="item in csListArrl" :key="item.id" class="order-item" @touchstart="drawStart($event,item)"
@touchmove="drawMove($event,item)" @touchend="drawEnd($event,item)" :style="{right:`${item.right}px`}">
<view class="content">{
{item.name}}</view>
<view class="remove" @click="delData(item)">注 销</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
csListArrl: [{
id: "001",
name: "测绘一测绘一测绘一测绘一",
right: 0
},
{
id: "002",
name: "测绘二测绘二测绘二测绘二测",
right: 0
},
{
id: "003",
name: "测绘三测绘三测绘三测绘三测",
right: 0
},
],
//左滑默认宽度
delBtnWidth: 160
}
},
onLoad() {
},
methods: {
//开始触摸滑动
drawStart(e, item) {
console.log("开始触发");
var touch = e.touches[0];
this.startX = touch.clientX;
},
//触摸滑动
drawMove(e, item) {
console.log("滑动");
var touch = e.touches[0];
var disX = touch.clientX-this.startX ;
console.log("disx:", disX)
if(disX<-this.delBtnWidth/2){
disX=-this.delBtnWidth
}
item.right = disX
}
},
//触摸滑动结束
drawEnd(e, item) {
console.log("滑动结束");
console.log("滑动结束--", e.currentTarget);
console.log("item:", item)
if(this.startX<0){
if(Math.abs(this.startX)<this.delBtnWidth/2){
this.startX=0
}else{
this.startX=-this.delBtnWidth
}
}
},
//删除方法
delData(item) {
console.log("删除")
uni.showModal({
title: '提示',
content: "确认注销该人员？",
success: function(res) {
if (res.confirm) {
console.log('用户点击确定');
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
}
}
}
</script>
<style scoped>
.order-item {
width: 100%;
display: flex;
position: relative;
padding: 10px 0;
transition: all 0.2s ease-out;
}
.remove {
width: 80px;
height: 100%;
background-color: red;
color: white;
position: absolute;
top: 0;
right: -165px;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
}
</style>