帮我写一个uniapp的用户列表页面,要支持右滑删除
时间: 2024-02-27 08:57:48 浏览: 14
好的,下面是一个简单的uniapp用户列表页面,支持右滑删除:
```html
<template>
<view class="container">
<view class="user-list">
<view class="user-item" v-for="(user, index) in userList" :key="index">
<view class="user-info">
<text class="user-name">{{ user.name }}</text>
<text class="user-email">{{ user.email }}</text>
</view>
<view class="delete-btn" @click.stop="deleteUser(index)">
<text class="btn-text">删除</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
userList: [
{ name: '张三', email: 'zhangsan@xxx.com' },
{ name: '李四', email: 'lisi@xxx.com' },
{ name: '王五', email: 'wangwu@xxx.com' },
],
};
},
methods: {
deleteUser(index) {
this.userList.splice(index, 1);
},
},
};
</script>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.user-list {
width: 100%;
}
.user-item {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #fff;
padding: 20rpx;
margin-bottom: 20rpx;
/* 右滑删除相关样式 */
position: relative;
overflow: hidden;
}
.user-info {
display: flex;
flex-direction: column;
}
.user-name {
font-size: 32rpx;
font-weight: bold;
}
.user-email {
font-size: 28rpx;
color: #666;
}
.delete-btn {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 200rpx;
background-color: #f00;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 26rpx;
transform: translateX(200rpx);
transition: transform 0.3s;
}
.delete-btn.active {
transform: translateX(0);
}
</style>
```
上面的代码中,我们使用了 flex 布局来实现列表的居中对齐,使用了 v-for 指令来循环渲染用户列表。在每个用户项的右侧,我们添加了一个删除按钮,并使用绝对定位和 transform 属性来实现右滑删除的效果。
当用户点击删除按钮时,我们使用 splice 方法从用户列表中删除对应的项。为了防止事件冒泡,我们使用了 @click.stop 修饰符。
注意:上面的代码只是一个简单的示例,实际开发中可能需要根据具体需求进行调整。