모바일 인터넷의 발전으로 전자상거래 앱이 점점 더 대중화되고 쇼핑이 더욱 편리해지고 있습니다. 일부 전자상거래 앱에서는 사용자가 왼쪽으로 스와이프하여 제품을 삭제하는 등 슬라이딩 인터페이스를 통해 제품을 조작할 수 있습니다. 그렇다면 uniapp에서 상품을 삭제하기 위해 왼쪽 스와이프를 구현하는 방법은 무엇일까요? 이번 글에서는 이에 대해 자세히 소개하겠습니다.
<movable-view
class="swiper-item"
x="{{item.x}}"
animation="true"
direction="horizontal"
damping="80"
friction="2"
></movable-view>여기서 x는 movable-view 컴포넌트의 위치이고 단위는 rpx입니다. 제품 목록에서 각 제품은 이동 가능한 뷰 구성 요소여야 합니다.
<!-- 让商品列表动态渲染 -->
<view v-for="(item, index) in list" :key="index">
<!-- 判断商品是否被选中，选中时改变背景颜色 -->
<movable-view
:class="{
'swiper-item-active': item.active
}"
@change="handleChange(index, $event)"
@touchend="handleTouchEnd(index, $event)"
x="{{item.x}}"
animation="true"
direction="horizontal"
damping="80"
friction="2"
:style="{left: item.active ? '-200rpx' : 0}"
>
<view class="swiper-wrapper">
<view class="image-wrapper">
<image :src="item.image"></image>
</view>
<view class="content-wrapper">
<view class="title">{{item.title}}</view>
<view class="price">{{item.price}}</view>
<view class="number">{{item.number}}</view>
</view>
<!-- 绑定删除操作 -->
<view
class="delete-btn"
v-if="item.active"
@click="$emit('delete', index)"
>删除</view>
</view>
</movable-view>
</view>
<script>
export default {
data() {
return {
list: [
{
title: '商品1',
image: '',
price: 100,
number: 1,
active: false,
x: 0
},
{
title: '商品2',
image: '',
price: 200,
number: 1,
active: false,
x: 0
}
]
}
},
methods: {
// 左滑删除商品
handleChange(index, event) {
// 获取movable-view组件的位置信息
const { detail } = event;
const x = detail.x;
this.list[index].x = x;
// 当移动距离超过200rpx时，显示删除按钮
if (x <= -200) {
this.list[index].active = true;
} else {
this.list[index].active = false;
}
},
// 停止触摸事件
handleTouchEnd(index, event) {
const { detail } = event;
const x = detail.x;
// 当用户放手时，如果movable-view组件位置小于-200rpx，则直接删除该商品
if (x <= -200) {
this.list.splice(index, 1);
} else {
// 否则，商品位置复位
this.list[index].x = 0;
}
// 删除操作完成后，将所有商品的选中状态重置
this.list.forEach((item) => {
item.active = false;
});
}
}
}
</script>위 샘플 코드를 통해 uniapp에서 왼쪽 스와이프로 제품 삭제 기능을 구현할 수 있습니다. 여기서 제품 목록은 단지 예일 뿐이라는 점에 유의해야 합니다. 실제 상황에서는 API에서 제품 목록을 가져와 동적으로 렌더링해야 합니다. 동시에 삭제 작업을 비동기 작업으로 전환해야 합니다. 즉, 항목을 삭제할 때 서버에 요청을 보내야 합니다. 여기서는 uniapp의 기본 동작만을 소개하며, 구체적인 구현은 추가적인 개선이 필요합니다.
위 내용은 uniapp은 왼쪽 스와이프로 제품 삭제 기능을 어떻게 구현하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
