效果如圖:

一、UI界面

<template><view class="body"><uni-forms :value="formData" ref="form" validate-trigger="bind" err-show-type="undertext"><view class="content"><uni-forms-item name="name" label="項目編號" labelAlign="left"><input type="text" disabled="" v-model="formData.number" class="uni-input-noneborder"></input></uni-forms-item><view class="line"></view><uni-forms-item name="name" label="項目全稱" labelAlign="left"><input type="text" disabled="" v-model="projectCon.name" class="uni-input-noneborder"placeholder="請輸入用戶名"></input></uni-forms-item><view class="line"></view><uni-forms-item name="name" label="項目簡稱" labelAlign="left"><input type="text" disabled="" v-model="projectCon.name" class="uni-input-noneborder"placeholder="請輸入用戶名"></input></uni-forms-item><view class="line"></view><uni-forms-item name="birth" label="提交日期" labelAlign="left"><picker mode="date" :value="formData.date" @change="bindDateChange"><view class="picker uni-input-noneborder">{{formData.date}}</view></picker></uni-forms-item></view> <view class="content" style="height:30px"> <view class="TextRight" @click="queryhistory">查看歷史記錄 ></view></view> <view class="content"><view class="title"><font class="leftTitle">固化物</font><font class="rightTitle">庫存：{{ghwkucunW - parseFloat(formData.solidWeightOut) }}噸，{{ghwkucunP - parseInt(formData.solidpackageOut) }}包</font></view><view class="line"></view><uni-forms-item name="trainNumber" label="固化物轉運車次" labelWidth="110" labelAlign="left"><input type="digit" v-model="formData.trainNumber" class="uni-input-border"placeholder="請輸入固化物轉運車次"></input></uni-forms-item><uni-forms-item name="solidpackageOut" label="固化物轉運包數" labelWidth="110" labelAlign="left"><input type="digit" v-model="formData.solidpackageOut" class="uni-input-border"placeholder="請輸入固化物轉運包數"></input></uni-forms-item><uni-forms-item name="solidWeightOut" label="固化物轉運重量" labelWidth="110" labelAlign="left"><input type="digit" v-model="formData.solidWeightOut" class="uni-input-border"placeholder="請輸入固化物轉運量"></input></uni-forms-item></view> <view class="content"><view class="title"><font class="leftTitle">榜單圖片</font></view><view class="line"></view><view class="content"><image class="img" v-for="(item,index) in imgArr" :src="getFlieName(item)"></image><image class="img" src="../../static/submit_upload.png" @click="chooseVideoImage" mode=""></image></view></view><view class="btuSty"><button type="primary" @click="$noMultipleClicks(submitForm)">提交表單</button></view><view class="btuSty"></view></uni-forms></view> </template>

二、css樣式

<style lang="less" scoped> .body {background-color: #f4f5f3;.content {background-color: white;margin-bottom: 15px;padding-bottom: 10px;.TextRight {float: right;width: 30%;font-size: 14px;cursor: pointer;padding: 5px;}}.line {height: 1px;width: 94%;margin: 0 auto;background-color: #e5e5e5;}.uni-forms-item {margin: 0 auto;margin-top: 5px;width: 90%;}.uni-forms--top {padding: 0px 0px;}.title {align-items: center;padding-left: 15px;height: 40px;line-height: 40px;margin-top: 15px;font-weight: normal;color: #333;}.leftTitle {float: left;}.rightTitle {margin-right: 10px;float: right;}.uni-forms-item__label {width: 80px !important;}.uni-input-noneborder {padding: 0 10px;height: 35px;width: 90%;float: left;font-size: 14px;color: #666;border-radius: 5px;box-sizing: border-box;}.uni-input-border {padding: 0 10px;height: 35px;width: 100%;float: left;font-size: 14px;color: #666;border: 1px #e5e5e5 solid;box-sizing: border-box;}.inputText {width: 10%;line-height: 35px;float: right;text-align: center;}.picker {padding: 10;height: 35px;width: 90%;float: left;font-size: 14px;color: #666;border-radius: 5px;box-sizing: border-box;line-height: 40px;}.content {width: 100%;height: 100%;display: block;justify-content: space-around;.img {width: 120px;height: 120px;}}.btuSty {margin-top: 20px;width: 70%;margin: 0 auto;height: 60px;} } </style>

end! 復制就能用

總結

以上是生活随笔為你收集整理的uniapp 简单表单布局1的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。