博客分享了配合上划线样式的微信小程序相关内容，直接使用会出错，因封装了一些东西在common.js文件里，如common.SHOWTIPS是wx.showToast的封装，还提及了wxml、wxss、js和app.wxss等代码。
配合上划线的一个样式，麻雀虽小五脏俱全吧，先看样子
直接用会出错，因为我这里封装了一些东西在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%);
}
扫一扫
9763
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
