微信小程序简单输入框布局（合并忘记密码和修改页面）-编程知识

微信小程序简单输入框布局（合并忘记密码和修改页面）

微信小程序简单入门级输入框布局，将忘记密码和修改页面合并到一个页面，根据传入的参数自动切换显示的界面信息。

修改密码
找回密码
上代码
1、js代码：

Page({/*** 页面的初始数据*/data: {current: 0,},/*** 生命周期函数--监听页面加载*/onLoad(options) {// let cur = options.current; 此参数由上级页面传入；0：修改密码；1：忘记密码let cur = 1;this.setData({current: cur})wx.setNavigationBarTitle({title: cur == 0 ? '修改密码' : '忘记密码',})},
})

2、wxml代码：

<view><view class="background-bg"></view><view class="box"><!-- 忘记密码 --><view hidden="{{current==0}}"><form catchsubmit="formSubmit2"><view class="row-info"><view class="row-title"><text class="must">*</text>姓名</view><input class="row-input" name="studentName" type="text" placeholder="请输入姓名" /></view><view class="row-info"><view class="row-title"><text class="must">*</text>学号</view><input class="row-input" name="studentNumber" type="text" placeholder="请输入学号" /></view><view class="row-info"><view class="row-title"><text class="must">*</text>手机号</view><input class="row-input" name="phone" maxlength="11" type="number" placeholder="请输入身手机号" /></view><view class="row-info"><view class="row-title"><text class="must">*</text>身份证号</view><input class="row-input" name="studentCard" type="text" placeholder="请输入身份证号" /></view><view class="row-info"><view class="row-title"><text class="must">*</text>新密码</view><input class="row-input" name="input" type="password" placeholder="请输入新密码" /></view><view class="row-info"><view class="row-title"><text class="must">*</text>确认密码</view><input class="row-input" name="input" type="password" placeholder="请再次确认新密码" /></view></form></view><!-- 修改密码 --><view hidden="{{current==1}}"><form catchsubmit="formSubmit2"><view class="row-info"><view class="row-title"><text class="must">*</text>原密码</view><input class="row-input" name="input" type="password" placeholder="请输入原密码" /></view><view class="row-info"><view class="row-title"><text class="must">*</text>新密码</view><input class="row-input" name="input" type="password" placeholder="请输入新密码" /></view><view class="row-info"><view class="row-title"><text class="must">*</text>确认密码</view><input class="row-input" name="input" type="password" placeholder="请再次确认新密码" /></view></form></view></view><view class="btn-area"><button type="primary" formType="submit">{{current==0?'保存修改':'立即找回'}}</button></view>
</view>

3、wxss代码：

.background-bg {width: 100%;height: 200rpx;position: absolute;background-color: #3782ff;border-bottom-left-radius: 50rpx;border-bottom-right-radius: 50rpx;
}.box {position: relative;margin: 0 20rpx;z-index: 999;background-color: white;border-radius: 15rpx;padding: 20rpx;
}.row-info {display: flex;flex-direction: column;font-size: 30rpx;border-bottom: 1rpx solid #f1f1f1;margin-bottom: 30rpx;
}.row-info:last-child {border: none;margin-bottom: 10rpx;
}.must {color: red;margin-right: 5rpx;
}.row-input {margin: 15rpx 0;padding: 10rpx 0 5rpx 15rpx;
}.btn-area {margin: 30rpx 40rpx;
}button {font-size: 30rpx;padding: 20rpx;padding: 0;
}