当前位置：首页 > news >正文

小程序滑动单元格

news 来源：原创 2024/9/21 8:16:34

项目场景：小程序用户管理列表，通过单元格滑动实现“密码重置”、“删除”功能。

技术框架：uniapp、uview3、ts

效果如下：

前端页面：

<template><view class="fui-wrap"><view class="fui-page__hd"><view class="fui-page__title">{{data.title}}</view><view class="fui-page__desc">{{data.sub_title}}</view></view><view class=""></view><view class="u-page__swipe-action-item" :bottomLeft="0" v-for="(item,index) in data.list"><up-swipe-action><up-swipe-action-item :options="buttons" @click="click" :name="item.StfID"><view class="swipe-action u-border-top u-border-bottom"><view class="swipe-action__content"><text style="min-height: 150rpx;"class="swipe-action__content__text">{{item.StfName}}/{{item.StfFullName}}</text></view></view></up-swipe-action-item></up-swipe-action></view></view>
</template><script setup lang="ts">import { deluser_api, resetpwd_api, userlist_api } from '@/service/ZlfApi';import { onLoad, onUnload } from '@dcloudio/uni-app';import { ref } from 'vue';const buttons = ref([{text: '重置密码',style: {background: '#465CFF'}}, {text: '删除',style: {background: '#FF2B2B'}}])const data = ref({title: '用户管理',sub_title: '滑动重置密码、删除用户',list: [],// totalCount: 0,})onLoad(() => {list()})onUnload(() => {// uni.$off('manageRefresh') })const click = (e : any) => {// console.log(index)let StfID = e.nameif (e.index == 0) {// 重置密码resetpwd_api({ StfID: StfID }).then((res : any) => {if (res.code == 1) {uni.hideLoading()uni.showModal({title: '提示',content: res.msg,showCancel:false})} else {uni.showToast({icon: 'error',title: res.msg})}})}if (e.index == 1) {// 删除用户uni.showModal({title: '提示',content: '操作不可逆，确认删除？',success: function (res) {if (res.confirm) {// console.log('用户点击确定');deluser_api({ StfID: StfID }).then((res : any) => {if (res.code == 1) {uni.hideLoading()uni.showModal({title: '提示',content: res.msg,showCancel:false,success: function (res) {if (res.confirm) {list();}}})} else {uni.showToast({icon: 'error',title: res.msg})}})} else if (res.cancel) {// console.log('用户点击取消');}}});}}const list = async () => {// 发起请求，获取设备列表const res = await userlist_api()data.value.list = res.dataconsole.log(data.value.list)}
</script><style lang="scss">.swipe-action {&__content {padding: 25rpx 0;&__text {font-size: 15px;color: $u-main-color;padding-left: 30rpx;}}}page {font-weight: normal;/* 非nvue端使用此变量改变list线条颜色，nvue端请查看文档 *//* --fui-color-border:#B2B2B2; */}.fui-section__title {margin-left: 32rpx;}.fui-list__item {flex: 1;width: 100%;display: flex;align-items: center;justify-content: space-between;}.fui-text__explain {font-size: 28rpx;color: #7F7F7F;flex-shrink: 0;}.fui-list__icon {width: 48rpx;height: 48rpx;margin-right: 24rpx;}
</style>