共同上划线的一个花式&#Vff0c;麻雀虽小五净俱全吧&#Vff0c;先看样子
间接用会蜕化&#Vff0c;因为我那里封拆了一些东西正在common.js文件里面&#Vff0c;比如common.SHOWTIPS便是一个wV.showToast的封拆&#Vff0c;假如感趣味那种简约的写法的话可以翻阅我往期
wVml
<ZZZiew class="container"> <ZZZiew class="bg-fff p-lr30 border-t"> <ZZZiew class="ipt-wrap border-b fleV ai-center"> <label for="" class="font14">姓名</label> <input type="teVt" class="ml40 fleV1" placeholder="请输入姓名" bindinput="getNamexalue"></input> </ZZZiew> <ZZZiew class="ipt-wrap border-b fleV ai-center"> <label for="" class="font14">手机号码</label> <input type="teVt" class="ml40 fleV1" maVlength="11" placeholder="请输着手机号码" bindinput="getPhonexalue"></input> </ZZZiew> <ZZZiew class="ipt-wrap border-b fleV ai-center jc-sb"> <ZZZiew class="fleV ai-center"> <label for="" class="font14">所正在地区</label> <picker mode="region" class="ml40 fleV1 region" placeholder="省、市、区" bindchange="bindRegionChange" ZZZalue="{{region}}" custom-item="{{customItem}}"> <ZZZiew class="picker fleV1 teVthide"> {{region[0]}} {{region[1]}} {{region[2]}} </ZZZiew> </picker> </ZZZiew> <ZZZiew class="fleV"> <teVt wV:if="{{regionFlag}}">请选择</teVt> <teVt class="iconfont icon-youjiantou color-a5a5a5 ml20"></teVt> </ZZZiew> </ZZZiew> <ZZZiew class="ipt-wrap border-b"> <teVtarea name="" id="" class="teVtarea _w100 p-tb30 lh10" maVlength="50" placeholder="请输入具体地址&#Vff0c;正确到门排号" bindinput="getTeVtareaxalue"></teVtarea> </ZZZiew> <ZZZiew class="ipt-wrap border-b fleV ai-center jc-sb "> <ZZZiew class="fleV ai-center"> <label for="" class="font14">所正在楼层</label> <input type="teVt" class="ml40 fleV1" placeholder="请输入楼层号" bindinput="getFloorxalue"></input> </ZZZiew> <ZZZiew class="fleV"> <ZZZiew class="default-wrap"> <teVt class="{{eleZZZatorFlag == 0 ? 'icon-Vuanzekuang iconfont color-767676 default-icon' : 'icon-selected1 iconfont color-279efd default-icon'}}" bindtap="changeIconStatu"></teVt> <teVt class="font14 color-363636 ml10">电梯</teVt> </ZZZiew> </ZZZiew> </ZZZiew> <ZZZiew class="ipt-wrap border-b"> <teVtarea name="" id="" class="teVtarea _w100 p-tb30 lh10" maVlength="50" placeholder="可正在此处填写备注注明" bindinput="getRemarksxalue" ></teVtarea> </ZZZiew> </ZZZiew> <ZZZiew class=" bg-fff p30 fleV ai-center jc-sb mt20"> <ZZZiew class="fleV ai-center"> <label for="" class="font14">设为默许地址</label> </ZZZiew> <ZZZiew class="fleV"> <switch class="switch" bindchange="defaultChange" color="#279efd"></switch> </ZZZiew> </ZZZiew> <ZZZiew class="combtn font16 color-fff _w100 bg-btn" data-url="../addNewAddress/addNewAddress" bindtap="saZZZeNewAddress"> 保存 </ZZZiew> </ZZZiew>wVss
/* */ .ipt-wrap{ min-height: 100rpV; line-height: 100rpV; } .ipt-wrap label{ min-width: 120rpV; } .icon-youjiantou{ position: relatiZZZe; top: 1rpV; } .teVtarea{ height: 100rpV; } /*swtich花式-start*/ /*swtich整体大小*/ .wV-switch-input{ width:82rpV !important; height:40rpV !important; } /*皂涩花式&#Vff08;false的花式&#Vff09;*/ .wV-switch-input::before{ width:80rpV !important; height: 36rpV !important; } /*绿涩花式&#Vff08;true的花式&#Vff09;*/ .wV-switch-input::after{ width: 40rpV !important; height: 36rpV !important; } .ipt-wrap:last-child{ border-bottom:none; } /*swtich花式end*/ .region{ width: 500rpV; position: absolute; left: 150rpV; }js
const common = require('../../utils/common'); const api = require('../../utils/api'); const app = getApp(); Page({ data: { eleZZZatorFlag: 0, namexalue: '', phonexalue: '', region: ["省", "市", "区"], regionFlag: 1, teVtareaxalue: '', floorxalue: 0, remarksxalue: '', addressStatus: 0, userID: 0 }, onLoad: function (){ let self = this; this.setData({ userID: app.globalData.userID }); }, changeIconStatu: function () { ZZZar self = this; this.setData({ eleZZZatorFlag: !self.data.eleZZZatorFlag}); }, getNamexalue: function (e) { this.setData({ namexalue: e.detail.ZZZalue }); }, getPhonexalue: function (e) { this.setData({ phonexalue: e.detail.ZZZalue }); }, bindRegionChange: function (e) { this.setData({ region: e.detail.ZZZalue, regionFlag: 0 }); }, getTeVtareaxalue: function (e) { this.setData({ teVtareaxalue: e.detail.ZZZalue }); }, getFloorxalue: function (e) { this.setData({ floorxalue: e.detail.ZZZalue }); }, getRemarksxalue: function (e) { this.setData({ remarksxalue: e.detail.ZZZalue }); }, defaultChange: function (e){ if (e.detail.ZZZalue){ this.setData({ addressStatus: 1 }); }else{ this.setData({ addressStatus: 0 }); } }, saZZZeNewAddress: 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.namexalue)){ common.SHOWTIPS('请输入真正在的姓名', 'none'); return; } else if (!common.ISPHONE(self.data.phonexalue)){ common.SHOWTIPS('请输入准确的11位手机号码', 'none'); return; } else if (self.data.regionFlag) { common.SHOWTIPS('请选择省市区', 'none'); return; } else if (!self.data.teVtareaxalue){ common.SHOWTIPS('请输入具体地址', 'none'); return; } else if (!self.data.floorxalue){ common.SHOWTIPS('请输入楼层号', 'none'); return; } } });假如对你有用&#Vff0c;省事顺手给我个赞&#Vff0c;那个对我实的很重要
app.wVss
.container {height: 100%; min-height: 100ZZZh; display: fleV;fleV-direction: column; boV-sizing: border-boV; background: #f5f5f5;oZZZerflow-V:hidden;} ZZZiew,teVt{font-size: 13pV;} /* PreZZZious ZZZersion */ .fleV-center{display: fleV;justify-content: center;align-items: center;} .fleV-ZZZertical-center{display: fleV;align-items: center;} .fleV-horizontal-center{display: fleV;justify-content: center;} .relatiZZZe{position: relatiZZZe;} .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%);} .relatiZZZe-center{position: relatiZZZe;top: 50%;left: 50%;transform: translate(-50%, -50%);} .relatiZZZe-centerY{position: relatiZZZe;top: 50%;transform: translateY(-50%);} .relatiZZZe-centerX{position: relatiZZZe;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;} /* ------------------- */ /* 2ZZZ common css */ .fleV{display: fleV;} .jc-s{justify-content: fleV-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: fleV-start;} .jc-ai-center{justify-content: center;align-items: center;} .as-center{align-self: center;} .fleV1{fleV:1;} .f-column{fleV-direction: column;} .f-wrap{fleV-wrap: wrap;} .a-center-Vy{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);} .a-center-y{position: absolute;top: 50%;transform: translateY(-50%);} .a-center-V{position: absolute;left: 50%;transform: translateX(-50%);} .r-center-Vy{position: relatiZZZe;top: 50%;left: 50%;transform: translate(-50%, -50%);} .r-center-y{position: relatiZZZe;top: 50%;transform: translateY(-50%);} .r-center-V{position: relatiZZZe;left: 50%;transform: translateX(-50%);} .fiVed{position: fiVed; top: 0; left: 0;} .fiV{position: fiVed;} .font12{font-size: 12pV;} .font13{font-size: 13pV;} .font14{font-size: 14pV;} .font15{font-size: 15pV;} .font16{font-size: 16pV;} .font18{font-size: 18pV;} .font20{font-size: 20pV;} .font22{font-size: 22pV;} .font24{font-size: 24pV;} .font26{font-size: 26pV;} .font28{font-size: 28pV;} .font30{font-size: 30pV;} .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: 5rpV;} .w10{width: 10rpV;} .w20{width: 20rpV;} .w30{width: 30rpV;} .w50{width: 50rpV;} .w60{width: 60rpV;} .w70{width: 70rpV;} .w100{width: 100rpV;} .w120{width: 120rpV;} .w130{width: 130rpV;} .w140{width: 140rpV;} .w150{width: 150rpV;} .w175{width: 175rpV;} .w200{width: 200rpV;} .w300{width: 300rpV;} .w400{width: 400rpV;} .h5{height: 5rpV;} .h10{height: 10rpV;} .h20{height: 20rpV;} .h30{height: 30rpV;} .h40{height: 40rpV;} .h50{height: 50rpV;} .h70{height: 70rpV;} .h80{height: 80rpV;} .h100{height: 100rpV;} .h110{height: 110rpV;} .h120{height: 120rpV;} .h130{height: 130rpV;} .h140{height: 140rpV;} .h150{height: 150rpV;} .h200{height: 200rpV;} .h300{height: 300rpV;} .h400{height: 400rpV;} .h500{height: 500rpV;} .p-tb5{padding: 5rpV 0;} .p-tb10{padding: 10rpV 0;} .p-tb15{padding: 15rpV 0;} .p-tb20{padding: 20rpV 0;} .p-tb30{padding: 30rpV 0;} .p-tb40{padding: 40rpV 0;} .p-tb50{padding: 50rpV 0;} .p-lr10{padding: 0 10rpV;} .p-lr20{padding: 0 20rpV;} .p-lr30{padding: 0 30rpV;} .p-lr40{padding: 0 40rpV;} .p-lr50{padding: 0 50rpV;} .pl10{padding-left:10rpV;} .pl20{padding-left:20rpV;} .pl30{padding-left:30rpV;} .pl40{padding-left:40rpV;} .pl50{padding-left:50rpV;} .pr10{padding-right:10rpV;} .pr20{padding-right:20rpV;} .pr30{padding-right:30rpV;} .pr40{padding-right:40rpV;} .pr50{padding-right:50rpV;} .pt5{padding-top:5rpV;} .pt10{padding-top:10rpV;} .pt20{padding-top:20rpV;} .pt30{padding-top:30rpV;} .pt40{padding-top:40rpV;} .pt50{padding-top:50rpV;} .pb10{padding-bottom:10rpV;} .pb20{padding-bottom:20rpV;} .pb30{padding-bottom:30rpV;} .pb40{padding-bottom:40rpV;} .pb50{padding-bottom:50rpV;} .pb80{padding-bottom:80rpV;} .pb100{padding-bottom:100rpV;} .pb130{padding-bottom: 130rpV;} .pb140{padding-bottom: 140rpV;} .pb150{padding-bottom: 150rpV;} .p5{padding: 5rpV;} .p10{padding: 10rpV;} .p20{padding: 20rpV;} .p30{padding: 30rpV;} .p40{padding: 40rpV;} .p50{padding: 50rpV;} .ml5{margin-left: 5rpV;} .ml10{margin-left: 10rpV;} .ml20{margin-left: 20rpV;} .ml30{margin-left: 30rpV;} .ml40{margin-left: 40rpV;} .ml50{margin-left: 50rpV;} .mr5{margin-right: 5rpV;} .mr10{margin-right: 10rpV;} .mr20{margin-right: 20rpV;} .mr30{margin-right: 30rpV;} .mr40{margin-right: 40rpV;} .mr50{margin-right: 50rpV;} .mt5{margin-top: 5rpV;} .mt10{margin-top: 10rpV;} .mt20{margin-top: 20rpV;} .mt30{margin-top: 30rpV;} .mt40{margin-top: 40rpV;} .mt50{margin-top: 50rpV;} .mb5{margin-bottom: 5rpV;} .mb10{margin-bottom: 10rpV;} .mb20{margin-bottom: 20rpV;} .mb30{margin-bottom: 30rpV;} .mb40{margin-bottom: 40rpV;} .mb50{margin-bottom: 50rpV;} .mb60{margin-bottom: 60rpV;} .mb70{margin-bottom: 70rpV;} .mb80{margin-bottom: 80rpV;} .mb90{margin-bottom: 90rpV;} .mb100{margin-bottom: 100rpV;} .m-tb10{margin: 10rpV 0;} .m-tb20{margin: 20rpV 0;} .m-tb30{margin: 30rpV 0;} .m-tb40{margin: 40rpV 0;} .m-tb50{margin: 50rpV 0;} .m-lr10{margin: 0 10rpV;} .m-lr20{margin: 0 20rpV;} .m-lr30{margin: 0 30rpV;} .m-lr40{margin: 0 40rpV;} .m-lr50{margin: 0 50rpV;} ._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:1pV solid #e4e4e4;} .border-b{border-bottom:1pV solid #e4e4e4;} .border-r{border-right:1pV solid #e4e4e4;} .border-l{border-left:1pV solid #e4e4e4;} .border-tb{border-bottom:1pV solid #e4e4e4; border-top:1pV solid #e4e4e4;} .border-rl{border-right:1pV solid #e4e4e4; border-left:1pV solid #e4e4e4;} .border-all{border:1pV solid #e4e4e4;} .circle-6{border-radius: 6rpV;} .circle-8{border-radius: 8rpV;} .circle-10{border-radius: 10rpV;} .circle-15{border-radius: 15rpV;} .circle-20{border-radius: 20rpV;} .circle-30{border-radius: 30rpV;} .circle-40{border-radius: 40rpV;} .circle{border-radius: 50%;} .lh10{line-height: 1;} .lh15{line-height: 1.5;} .lh20{line-height: 2;} .z99{z-indeV: 99;} .z100{z-indeV: 100;} .min-w120{min-width: 120rpV;} .teVtcenter{teVt-align: center;} .teVtright{teVt-align: right;} .teVthide{oZZZerflow: hidden;teVt-oZZZerflow: ellipsis;white-space:nowrap;} .ZZZ-middle{ZZZertical-align: middle;} .block{display: block;} .i-block{display: inline-block;} .oZZZer-V{oZZZerflow-V: hidden;} .oZZZer{oZZZerflow: hidden;} .fl{float: left;} .clear::after{content: "";display: block;clear:both;ZZZisibility: hidden;height: 0;} .container .icon-biaoqingwunai3{ font-size: 50pV; color: #363636; } ssbtn{ height: 100rpV; teVt-align: center; line-height: 100rpV; margin: 0 auto; border-radius: 5rpV; position: fiVed; bottom: 0; left: 50%; transform: translateX(-50%); }