本文给大家带来的是微信小程序绑定已有账号页面设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<!--bindAccount.wxml 绑定账号-->
<view class="top-switch">
<view class="left">
<button class="lbutton" bindtap="default"> 绑定已有账号 </button>
</view>
<view class="right">
<button class="rbutton" bindtap="default"> 注册新的账号 </button>
</view>
</view>
<view class="form-here">
<!-- <view class="form-account"> -->
<input class="form-account" placeholder="请输入原登录账号"/>
<view class="hr"></view>
<!-- </view> -->
<!-- <view class="form-password"> -->
<input class="form-password" placeholder="请输入原登录密码" />
<view class="hr" style="margin-top:5px;"></view>
<!-- </view> -->
</view>
<view class="submit">
<button class="sub-button">确认绑定</button>
</view>
|
二、wxss样式文件代码如下：
/* bindAccount.wxss */
.top-switch{
background-color:#ffffff;
padding:10px 15px;
display:flex;
}
.left{
width:50%;
padding:0 10px;
border-right:1rpx solid #d6d6d6;
}
.right{
width:50%;
padding:0 10px;
}
.lbutton{
line-height:1;
border-radius:20px;
padding:5px 10px;
color:#ffffff;
background-color:#f9364f;
}
.rbutton{
border: 1px solid #f9364f;
line-height:1;
border-radius:20px;
padding:5px 10px;
color:#f9364f;
}
/*form */
.form-here{
margin-top:10px;
background-color:#ffffff;
padding:20px 30px;
}
.form-password{
margin-top:20px;
}
.submit{
margin-top: 30px;
display:flex;
}
.sub-button{
background-color:#0398e7;
color:#ffffff;
line-height:1.8;
border-radius:30px;
padding:5px 100px;
}
|
三、js页面代码如下：
// bindAccount.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
|
.jpg)
.jpg)
