今天给大家带来微信小程序单页面模板之修改密码页面制作教程，主要适合会员个人中心修改密码，修改账号类。制作完毕以后效果图如下：
一、wxml页面代码如下：
<!--pages/A-centrality/A-mySetting/A-password/A-password.wxml-->
<view class='container'>
<form>
<view class='top'>
<view class='one_list'>
<view class='change'>
<view class=''>旧密码：</view>
<view>
<input placeholder="请输入旧密码" maxlength='20'></input>
</view>
</view>
<view class='x'>✖</view>
</view>
<view class='x_line'></view>
<view class='one_list'>
<view class='change'>
<view class=''>新密码：</view>
<view>
<input placeholder="请输入新密码" maxlength='20'></input>
</view>
</view>
<view class='x'>✖</view>
</view>
<view class='x_line'></view>
<view class='one_list'>
<view class='change'>
<view class=''>确认密码：</view>
<view>
<input placeholder="请再次输入新密码" maxlength='20'></input>
</view>
</view>
<view class='x'>✖</view>
</view>
</view>
<view class='btn'>确定</view>
</form>
</view>
|
二、wxss样式文件代码如下：
/* pages/A-centrality/A-mySetting/A-password/A-password.wxss */
page {
background-color: #eee;
font-size: 28rpx;
}
.container {
padding: 20rpx;
box-sizing: border-box;
}
.top {
width: 100%;
background-color: #fff;
border-radius: 15rpx;
box-shadow: 0 5rp 5rp #e9e9e9;
}
.one_list {
padding: 0 20rpx;
box-sizing: border-box;
height: 90rpx;
line-height: 90rpx;
display: flex;
align-items: center;
justify-content: space-between
}
input {
width: 450rpx;
}
.x {
width: 34rpx;
height: 34rpx;
border-radius: 50%;
background-color: #999;
color: #fff;
text-align: center;
line-height: 34rpx;
font-size: 24rpx;
float: right;
}
.x_line {
width: 100%;
height: 1px;
background-color: #eee;
}
.change{
display: flex;
align-items: center
}
.btn {
width: 100%;
height: 90rpx;
text-align: center;
line-height: 90rpx;
color: #fff;
margin-top: 40rpx;
background: linear-gradient(to right, #22a0ff, #007ce7);
border-radius: 15rpx;
box-shadow: 0 5rpx 5rpx #8ccaf6;
}
|
三、js文件代码如下：
// pages/A-centrality/A-mySetting/A-password/A-password.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
|
.jpg)
.jpg)
