本文给大家带来的是微信小程序包裹转运个人资料填写免费注册页面设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<!--baseinfoAccount.wxml-->
<view class="in">
<view class="left">
<text class="left-in">基本资料</text>
</view>
<view class="right">
<text class="right-in">仓库地址</text>
</view>
</view>
<view class="form-here">
<!-- <view class="form-account"> -->
<view class="info-wrap" style="margin-top:0">
<text class="label">姓名:</text>
<input class="form-account" />
</view>
<view class="hr" style="margin-top:5px;"></view>
<view class="info-wrap" style="margin-bottom:20px">
<text class="label">性别:</text>
<radio-group class="radio-group" bindchange="radioChange">
<label class="radio" wx:for="{{items}}">
<radio name="adtype" value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
</label>
</radio-group>
</view>
<view class="info-wrap">
<text class="label">国家:</text>
<input class="form-account" />
</view>
<view class="hr" style="margin-top:5px;"></view>
<view class="info-wrap">
<text class="label">省/州:</text>
<input class="form-account" />
</view>
<view class="hr" style="margin-top:5px;"></view>
<view class="info-wrap">
<text class="label">城市:</text>
<input class="form-account" />
</view>
<view class="hr" style="margin-top:5px;"></view>
<view class="info-wrap">
<text class="label">地址:</text>
<input class="form-account" />
</view>
<view class="hr" style="margin-top:5px;"></view>
<view class="info-wrap">
<text class="label">邮编:</text>
<input class="form-account" />
</view>
<view class="hr" style="margin-top:5px;"></view>
<view class="info-wrap">
<text class="label">电话:</text>
<input class="form-account" />
</view>
<view class="hr" style="margin-top:5px;"></view>
</view>
<view class="submit">
<button class="sub-button">免费注册</button>
</view>
|
二、wxss样式文件代码如下：
/* baseinfoAccount.wxss */
.in{
background-color:#ffffff;
display:flex;
justify-content:center;
padding:15px;
margin-bottom:15px;
}
.left{
border-right:1px solid #d6d6d6;
padding-right:20px;
}
.right{
padding-left:20px;
}
.left-in{
color: #f9364f;
}
.right-in{
color: #9a9a9a;
}
/*form */
.form-here{
margin-top:10px;
background-color:#ffffff;
padding:20px 30px;
}
.form-password{
margin-top:20px;
}
.submit{
/* margin-top:30px; */
display:flex;
justify-content:center;
flex-flow:column wrap;
padding:0 10px;
}
/*addition */
.verify{
display:flex;
justify-content:space-between;
}
.verify-input{
width:60%;
}
.getcode{
height:40px;
line-height:40px;
background-color:#f9364f;
color:#ffffff;
}
.agree{
text-align:center;
font-size:12px;
}
.sub-button{
background-color:#0398e7;
color:#ffffff;
line-height:1.8;
border-radius:30px;
padding:5px 90px;
margin-top:20px;
}
.agreement{
color: #40a1e0;
}
/*this about */
.label{
width:15%;
position:relative;
top:3px;
color:#666666;
}
.form-account{
width:80%;
color:#666666;
padding-left:5px;
}
.info-wrap{
display:flex;
margin-top: 20px;
/* margin-bottom: 5px; */
}
.radio-group{
display:flex;
width:80%;
justify-content:space-between;
padding:0 20px;
color:#666666;
}
|
三、js页面代码如下：
// baseinfoAccount.js
Page({
/**
* 页面的初始数据
*/
data: {
items: [
{ name: '0', value: '男',checked:'true' },
{ name: '1', value: '女' },
{ name: '2', value: '保密' },
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
|
.jpg)
.jpg)
