小程序滑动单元格

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

技术框架:uniapp、uview3、ts

效果如下:

前端页面:

html 复制代码
<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.name
		if (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.data
		console.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>
相关推荐
2501_915918418 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
2501_915106328 小时前
iOS 使用记录和能耗监控实战,如何查看电池电量消耗、App 使用时长与性能数据(uni-app 开发调试必备指南)
android·ios·小程序·uni-app·cocoa·iphone·webview
じòぴé南冸じょうげん16 小时前
小程序的project.private.config.json是无依赖文件,那可以删除吗?
前端·小程序·json
2501_9160137417 小时前
HTTPS 抓包难点分析,从端口到工具的实战应对
网络协议·http·ios·小程序·https·uni-app·iphone
2501_9159184119 小时前
uni-app 项目 iOS 上架效率优化 从工具选择到流程改进的实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张20 小时前
如何在不同 iOS 设备上测试和上架 uni-app 应用 实战全流程解析
android·ios·小程序·https·uni-app·iphone·webview
微三云-轩20 小时前
区块链:重构企业数字化的信任核心与创新动力
人工智能·小程序·区块链·生活·我店
2501_915918412 天前
iOS 开发全流程实战 基于 uni-app 的 iOS 应用开发、打包、测试与上架流程详解
android·ios·小程序·https·uni-app·iphone·webview
黑马源码库miui520862 天前
JAVA同城打车小程序APP打车顺风车滴滴车跑腿源码微信小程序打车源码
java·微信·微信小程序·小程序·uni-app
一口十个小甜虾2 天前
微信小程序体验版,当打开调试模式正常访问,关闭之后无法访问
微信小程序·小程序