配合上劃線的一個樣式，麻雀雖小五臟俱全吧，先看樣子

直接用會出錯，因為我這里封裝了一些東西在common.js文件里面，比如common.SHOWTIPS就是一個wx.showToast的封裝，如果感興趣這種簡潔的寫法的話可以翻閱我往期

wxml

<view class="container"><view class="bg-fff p-lr30 border-t"><view class="ipt-wrap border-b flex ai-center"><label for="" class="font14">姓名</label><input type="text" class="ml40 flex1" placeholder="請輸入姓名" bindinput="getNameValue"></input></view><view class="ipt-wrap border-b flex ai-center"><label for="" class="font14">手機號碼</label><input type="text" class="ml40 flex1" maxlength="11" placeholder="請輸入手機號碼" bindinput="getPhoneValue"></input></view><view class="ipt-wrap border-b flex ai-center jc-sb"><view class="flex ai-center"><label for="" class="font14">所在地區</label><picker mode="region" class="ml40 flex1 region" placeholder="省、市、區" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}"><view class="picker flex1 texthide">{{region[0]}} {{region[1]}} {{region[2]}}</view></picker></view><view class="flex"><text wx:if="{{regionFlag}}">請選擇</text><text class="iconfont icon-youjiantou color-a5a5a5 ml20"></text></view></view><view class="ipt-wrap border-b"><textarea name="" id="" class="textarea _w100 p-tb30 lh10" maxlength="50" placeholder="請輸入詳細地址，精確到門牌號" bindinput="getTextareaValue"></textarea></view><view class="ipt-wrap border-b flex ai-center jc-sb "><view class="flex ai-center"><label for="" class="font14">所在樓層</label><input type="text" class="ml40 flex1" placeholder="請輸入樓層號" bindinput="getFloorValue"></input></view><view class="flex"><view class="default-wrap"><text class="{{elevatorFlag == 0 ? 'icon-xuanzekuang iconfont color-767676 default-icon' : 'icon-selected1 iconfont color-279efd default-icon'}}" bindtap="changeIconStatu"></text><text class="font14 color-363636 ml10">電梯</text></view></view></view><view class="ipt-wrap border-b"><textarea name="" id="" class="textarea _w100 p-tb30 lh10" maxlength="50" placeholder="可在此處填寫備注說明" bindinput="getRemarksValue" ></textarea></view></view><view class=" bg-fff p30 flex ai-center jc-sb mt20"><view class="flex ai-center"><label for="" class="font14">設為默認地址</label></view><view class="flex"><switch class="switch" bindchange="defaultChange" color="#279efd"></switch></view></view><view class="combtn font16 color-fff _w100 bg-btn" data-url="../addNewAddress/addNewAddress" bindtap="saveNewAddress">保存</view> </view>

wxss

/* */ .ipt-wrap{min-height: 100rpx;line-height: 100rpx; } .ipt-wrap label{min-width: 120rpx; } .icon-youjiantou{position: relative;top: 1rpx; } .textarea{height: 100rpx; } /*swtich樣式-start*/ /*swtich整體大小*/ .wx-switch-input{width:82rpx !important;height:40rpx !important; } /*白色樣式（false的樣式）*/ .wx-switch-input::before{width:80rpx !important;height: 36rpx !important; } /*綠色樣式（true的樣式）*/ .wx-switch-input::after{width: 40rpx !important;height: 36rpx !important; } .ipt-wrap:last-child{border-bottom:none; } /*swtich樣式end*/ .region{width: 500rpx;position: absolute;left: 150rpx; }

js

const common = require('../../utils/common'); const api = require('../../utils/api'); const app = getApp();Page({data: {elevatorFlag: 0,nameValue: '',phoneValue: '',region: ["省", "市", "區"],regionFlag: 1,textareaValue: '',floorValue: 0,remarksValue: '',addressStatus: 0,userID: 0},onLoad: function (){let self = this;this.setData({ userID: app.globalData.userID });},changeIconStatu: function () {var self = this;this.setData({ elevatorFlag: !self.data.elevatorFlag});},getNameValue: function (e) {this.setData({ nameValue: e.detail.value });},getPhoneValue: function (e) {this.setData({ phoneValue: e.detail.value });},bindRegionChange: function (e) {this.setData({ region: e.detail.value, regionFlag: 0 });},getTextareaValue: function (e) {this.setData({ textareaValue: e.detail.value });},getFloorValue: function (e) {this.setData({ floorValue: e.detail.value });},getRemarksValue: function (e) {this.setData({ remarksValue: e.detail.value });},defaultChange: function (e){if (e.detail.value){this.setData({ addressStatus: 1 });}else{this.setData({ addressStatus: 0 }); }},saveNewAddress: function () {let self = this,regionFlag = self.data.regionFlag,addressStatus = self.data.addressStatus,region = self.data.region,str = '';for (let i = 0, len = region.length; i < len; i++){if (region[i].length == 1){region[i] = region[i-1];}str += region[i] + ' ';}let byUrl = api.INTERFACES.findByAddress, byData = { areaName: str};if (!common.ISNAME(self.data.nameValue)){common.SHOWTIPS('請輸入真實的姓名', 'none'); return;} else if (!common.ISPHONE(self.data.phoneValue)){common.SHOWTIPS('請輸入正確的11位手機號碼', 'none'); return;} else if (self.data.regionFlag) {common.SHOWTIPS('請選擇省市區', 'none'); return;} else if (!self.data.textareaValue){common.SHOWTIPS('請輸入詳細地址', 'none'); return;} else if (!self.data.floorValue){common.SHOWTIPS('請輸入樓層號', 'none'); return;} } });

如果對你有用，麻煩順手給我個贊，這個對我真的很重要

app.wxss

.container {height: 100%; min-height: 100vh; display: flex;flex-direction: column; box-sizing: border-box;background: #f5f5f5;overflow-x:hidden;} view,text{font-size: 13px;}/* Previous version */ .flex-center{display: flex;justify-content: center;align-items: center;} .flex-vertical-center{display: flex;align-items: center;} .flex-horizontal-center{display: flex;justify-content: center;}.relative{position: relative;} .absolute{position: absolute;} .t0{top: 0;} .r0{right: 0;} .b0{bottom: 0;} .l0{left: 0;}.absolute-center{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);} .absolute-centerY{position: absolute;top: 50%;transform: translateY(-50%);} .absolute-centerX{position: absolute;left: 50%;transform: translateX(-50%);}.relative-center{position: relative;top: 50%;left: 50%;transform: translate(-50%, -50%);} .relative-centerY{position: relative;top: 50%;transform: translateY(-50%);} .relative-centerX{position: relative;left: 50%;transform: translateX(-50%);}.color-279efd{color: #279efd;} .color-24a9e2{color: #24a9e2;} .color-0cf{color: #00ccff;} .color-767676{color: #767676;} .color-a9987b{color: #a9987b;} .color-363636{color: #363636;} .color-a5a5a5{color: #a5a5a5;} .color-ffd452{color: #ffd452;} .color-ffd700{color: #ffd700;} .color-ff0000{color: #ff0000;} .color-eb3324{color: #eb3324;} .color-fa9c3e{color: #fa9c3e;}.bg-279efd{background: #279efd;} .bg-0cf{background: #00ccff;} .bg-66ded0{background: #66ded0;} .bg-ffd452{background: #ffd452;} .bg-fff{background: #ffffff;} .bg-e7f2ff{background: #e7f2ff;} .bg-f5f5f5{background: #f5f5f5;} .bg-c9c9c9{background: #c9c9c9;} .bg-f1f1f1{background: #f1f1f1;} .bg-fa9c3e{background: #fa9c3e;} .bg-24a9e2{background: #24a9e2;}.bg-btn{background: linear-gradient(to right, #66ded0, #229dfe);}.font-w-b{font-weight: bold;} /* ------------------- *//* 2v common css */ .flex{display: flex;} .jc-s{justify-content: flex-start;} .jc-sa{justify-content: space-around;} .jc-sb{justify-content: space-between;} .jc-center{justify-content: center;} .ai-center{align-items: center;} .ai-s{align-items: flex-start;} .jc-ai-center{justify-content: center;align-items: center;} .as-center{align-self: center;} .flex1{flex:1;} .f-column{flex-direction: column;} .f-wrap{flex-wrap: wrap;}.a-center-xy{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);} .a-center-y{position: absolute;top: 50%;transform: translateY(-50%);} .a-center-x{position: absolute;left: 50%;transform: translateX(-50%);}.r-center-xy{position: relative;top: 50%;left: 50%;transform: translate(-50%, -50%);} .r-center-y{position: relative;top: 50%;transform: translateY(-50%);} .r-center-x{position: relative;left: 50%;transform: translateX(-50%);}.fixed{position: fixed; top: 0; left: 0;} .fix{position: fixed;}.font12{font-size: 12px;} .font13{font-size: 13px;} .font14{font-size: 14px;} .font15{font-size: 15px;} .font16{font-size: 16px;} .font18{font-size: 18px;} .font20{font-size: 20px;} .font22{font-size: 22px;} .font24{font-size: 24px;} .font26{font-size: 26px;} .font28{font-size: 28px;} .font30{font-size: 30px;} .font-b{font-weight: bold;}.color-a{color: #aaa;} .color-f00{color: #f00;} .color-fff{color: #fff;}.abg{background: #aaa;} .bbg{background: #bbb;} .cbg{background: #ccc;} .dbg{background: #ddd;} .ebg{background: #eee;} .bg-f00{background: #f00;} .bg-333{background: #333;}.w5{width: 5rpx;} .w10{width: 10rpx;} .w20{width: 20rpx;} .w30{width: 30rpx;} .w50{width: 50rpx;} .w60{width: 60rpx;} .w70{width: 70rpx;} .w100{width: 100rpx;} .w120{width: 120rpx;} .w130{width: 130rpx;} .w140{width: 140rpx;} .w150{width: 150rpx;} .w175{width: 175rpx;} .w200{width: 200rpx;} .w300{width: 300rpx;} .w400{width: 400rpx;} .h5{height: 5rpx;} .h10{height: 10rpx;} .h20{height: 20rpx;} .h30{height: 30rpx;} .h40{height: 40rpx;} .h50{height: 50rpx;} .h70{height: 70rpx;} .h80{height: 80rpx;} .h100{height: 100rpx;} .h110{height: 110rpx;} .h120{height: 120rpx;} .h130{height: 130rpx;} .h140{height: 140rpx;} .h150{height: 150rpx;} .h200{height: 200rpx;} .h300{height: 300rpx;} .h400{height: 400rpx;} .h500{height: 500rpx;}.p-tb5{padding: 5rpx 0;} .p-tb10{padding: 10rpx 0;} .p-tb15{padding: 15rpx 0;} .p-tb20{padding: 20rpx 0;} .p-tb30{padding: 30rpx 0;} .p-tb40{padding: 40rpx 0;} .p-tb50{padding: 50rpx 0;} .p-lr10{padding: 0 10rpx;} .p-lr20{padding: 0 20rpx;} .p-lr30{padding: 0 30rpx;} .p-lr40{padding: 0 40rpx;} .p-lr50{padding: 0 50rpx;} .pl10{padding-left:10rpx;} .pl20{padding-left:20rpx;} .pl30{padding-left:30rpx;} .pl40{padding-left:40rpx;} .pl50{padding-left:50rpx;} .pr10{padding-right:10rpx;} .pr20{padding-right:20rpx;} .pr30{padding-right:30rpx;} .pr40{padding-right:40rpx;} .pr50{padding-right:50rpx;} .pt5{padding-top:5rpx;} .pt10{padding-top:10rpx;} .pt20{padding-top:20rpx;} .pt30{padding-top:30rpx;} .pt40{padding-top:40rpx;} .pt50{padding-top:50rpx;} .pb10{padding-bottom:10rpx;} .pb20{padding-bottom:20rpx;} .pb30{padding-bottom:30rpx;} .pb40{padding-bottom:40rpx;} .pb50{padding-bottom:50rpx;} .pb80{padding-bottom:80rpx;} .pb100{padding-bottom:100rpx;} .pb130{padding-bottom: 130rpx;} .pb140{padding-bottom: 140rpx;} .pb150{padding-bottom: 150rpx;} .p5{padding: 5rpx;} .p10{padding: 10rpx;} .p20{padding: 20rpx;} .p30{padding: 30rpx;} .p40{padding: 40rpx;} .p50{padding: 50rpx;}.ml5{margin-left: 5rpx;} .ml10{margin-left: 10rpx;} .ml20{margin-left: 20rpx;} .ml30{margin-left: 30rpx;} .ml40{margin-left: 40rpx;} .ml50{margin-left: 50rpx;} .mr5{margin-right: 5rpx;} .mr10{margin-right: 10rpx;} .mr20{margin-right: 20rpx;} .mr30{margin-right: 30rpx;} .mr40{margin-right: 40rpx;} .mr50{margin-right: 50rpx;} .mt5{margin-top: 5rpx;} .mt10{margin-top: 10rpx;} .mt20{margin-top: 20rpx;} .mt30{margin-top: 30rpx;} .mt40{margin-top: 40rpx;} .mt50{margin-top: 50rpx;} .mb5{margin-bottom: 5rpx;} .mb10{margin-bottom: 10rpx;} .mb20{margin-bottom: 20rpx;} .mb30{margin-bottom: 30rpx;} .mb40{margin-bottom: 40rpx;} .mb50{margin-bottom: 50rpx;} .mb60{margin-bottom: 60rpx;} .mb70{margin-bottom: 70rpx;} .mb80{margin-bottom: 80rpx;} .mb90{margin-bottom: 90rpx;} .mb100{margin-bottom: 100rpx;} .m-tb10{margin: 10rpx 0;} .m-tb20{margin: 20rpx 0;} .m-tb30{margin: 30rpx 0;} .m-tb40{margin: 40rpx 0;} .m-tb50{margin: 50rpx 0;} .m-lr10{margin: 0 10rpx;} .m-lr20{margin: 0 20rpx;} .m-lr30{margin: 0 30rpx;} .m-lr40{margin: 0 40rpx;} .m-lr50{margin: 0 50rpx;}._w10{width: 10%;} ._w15{width: 15%;} ._w20{width: 20%;} ._w25{width: 25%;} ._w50{width: 50%;} ._w70{width: 70%;} ._w75{width: 75%;} ._w80{width: 80%;} ._w90{width: 90%;} ._w95{width: 95%;} ._w100{width: 100%;} ._h100{height: 100%;}.no-b-l{border-left: none;} .no-b-r{border-right: none;} .no-b-t{border-top: none;} .no-b-b{border-bottom: none;} .border-t{border-top:1px solid #e4e4e4;} .border-b{border-bottom:1px solid #e4e4e4;} .border-r{border-right:1px solid #e4e4e4;} .border-l{border-left:1px solid #e4e4e4;} .border-tb{border-bottom:1px solid #e4e4e4; border-top:1px solid #e4e4e4;} .border-rl{border-right:1px solid #e4e4e4; border-left:1px solid #e4e4e4;} .border-all{border:1px solid #e4e4e4;}.circle-6{border-radius: 6rpx;} .circle-8{border-radius: 8rpx;} .circle-10{border-radius: 10rpx;} .circle-15{border-radius: 15rpx;} .circle-20{border-radius: 20rpx;} .circle-30{border-radius: 30rpx;} .circle-40{border-radius: 40rpx;} .circle{border-radius: 50%;}.lh10{line-height: 1;} .lh15{line-height: 1.5;} .lh20{line-height: 2;}.z99{z-index: 99;} .z100{z-index: 100;} .min-w120{min-width: 120rpx;}.textcenter{text-align: center;} .textright{text-align: right;} .texthide{overflow: hidden;text-overflow: ellipsis;white-space:nowrap;} .v-middle{vertical-align: middle;} .block{display: block;} .i-block{display: inline-block;} .over-x{overflow-x: hidden;} .over{overflow: hidden;} .fl{float: left;} .clear::after{content: "";display: block;clear:both;visibility: hidden;height: 0;}.container .icon-biaoqingwunai3{font-size: 50px;color: #363636; } .combtn{height: 100rpx;text-align: center;line-height: 100rpx;margin: 0 auto;border-radius: 5rpx;position: fixed;bottom: 0;left: 50%;transform: translateX(-50%); }

?

總結

以上是生活随笔為你收集整理的小程序好看的表单样式的全部內容，希望文章能夠幫你解決所遇到的問題。

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