快捷導(dǎo)航

uniapp實現(xiàn)審批流程的具體操作步驟

更新時間：2024年03月01日 15:07:26 作者：禿頭饅頭

這篇文章主要介紹了uniapp實現(xiàn)審批流程的具體操作方法,實現(xiàn)思路大概是需要要定義一個變量,記錄當(dāng)前激活的步驟,通過數(shù)組的長度來循環(huán)數(shù)據(jù),如果有就采用3元一次進行選擇,具體實現(xiàn)步驟跟隨小編一起看看吧

一、實現(xiàn)思路

需要要定義一個變量, 記錄當(dāng)前激活的步驟。通過數(shù)組的長度來循環(huán)數(shù)據(jù)，如果有就采用3元一次進行選擇。

把循環(huán)里面的變量【name、status、time】, 全部替換為取出的那一項的值。然后繼續(xù)下一次循環(huán)。

虛擬的數(shù)據(jù)都是請求來的, 組裝為好渲染的格式。

二、實現(xiàn)步驟

①view部分展示

如果有看不懂的代碼，請繼續(xù)往下看，會有解釋?。。?/p>

<view class="container" style="margin: 24rpx 0;">
				<view class="overbold" style="margin-bottom: 40rpx;">審批</view>
				<template v-for="(item,index) in funList.RenList">
					<view :key="index" class="flex"
						:style="{ marginBottom: index === funList.RenList.length - 1 ? '24rpx' : '68rpx' }">
						<view class="img-box">
							<image class="figure" :src="item.image" mode="aspectFill"></image>
							<view v-if="index != funList.RenList.length - 1" class="line">
							</view>
						</view>
						<view style="margin-left: 20rpx;">
							<view class="flex" style="width: 518rpx;">
								<view class="changwrod" style="margin-bottom: 8rpx;width: 60%;">{{ item.name }}</view>
								<view v-if="item.status == 1" class="smallword" style="color: #999;">{{ item.time }}
								</view>
							</view>
							<view v-if="item.status == 1" class="smallword" style="color: #31BA3E;">已通過</view>
							<view v-if="item.status == 0" class="smallword" style="color: #666;">待審批</view>
						</view>
					</view>
				</template>
			</view>

代碼解釋：

代碼解釋：

funList.RenList：對象中的數(shù)組【考慮到后期交互，也可能單獨拿出來】

:style="{ marginBottom: index === funList.RenList.length - 1 ? '24rpx' : '68rpx' }"

這段代碼是一個動態(tài)的樣式綁定，它根據(jù)條件來設(shè)置元素的 marginBottom 樣式屬性的值。

具體解釋如下：
:style 是 Vue/uni-app 中用來動態(tài)綁定樣式的語法。

marginBottom 是 CSS 中的屬性，用來設(shè)置元素的下邊距。

index === funList.RenList.length - 1 是一個條件判斷表達式，表示如果當(dāng)前元素的索引（index）等于 funList.RenList 數(shù)組的長度減 1。

? '24rpx' : '68rpx' 是一個三元表達式，用于根據(jù)條件判斷結(jié)果設(shè)置不同的值。如果條件為真，即當(dāng)前元素是最后一個元素，那么設(shè)置下邊距為 '24rpx'；否則，設(shè)置下邊距為 '68rpx'。
換句話說，這段代碼的作用是：如果當(dāng)前元素是 funList.RenList 數(shù)組中的最后一個元素，則設(shè)置它的下邊距為 '24rpx'；否則，設(shè)置下邊距為 '68rpx'。

②JavaScript 內(nèi)容

               funList: {
			        	//。。。。。交互內(nèi)容
					RenList: [{
						image: 'https://cdn.uviewui.com/uview/album/1.jpg',
						name: "葉玲",
						time: "2023.12.03 10:30",
						status: 1 // 1已審核 0未審核
					}, {
						image: 'https://cdn.uviewui.com/uview/album/1.jpg',
						name: "大耳朵",
						time: "2023.12.03 10:30",
						status: 0
					}, {
						image: 'https://cdn.uviewui.com/uview/album/1.jpg',
						name: "葉玲",
						time: "2023.12.03 10:30",
						status: 1 // 1已審核 0未審核
					}]
				},

③css中樣式展示

container{
    padding: 32rpx;
    background-color: #fff;
    border-radius: 16rpx;
}
.overbold {
    font-weight: bold;
    color: #1A1A1A;
    font-family: PingFang SC-Bold;
    line-height: 48rpx;
    font-size: 32rpx;
}
.img-box {
        position: relative;
        .figure {
            width: 80rpx;
            height: 80rpx;
            border-radius: 8rpx;
        }
        //中間的間隔線
        .line {
            position: absolute;
            left: 50%;
            top: 130%;
            transform: translate(-50%, -50%);
            width: 6rpx;
            height: 60rpx;
            background-color: rgba(102, 102, 102, 0.5);
        }
    }