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

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


上代码

1、js代码:

javascript 复制代码
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代码:

html 复制代码
<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代码:

css 复制代码
.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;
}

布局简单,主要给初学者提供服务呦~

相关推荐
lecepin27 分钟前
AI Coding 资讯 2025-09-17
前端·javascript·面试
猩兵哥哥1 小时前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js
江城开朗的豌豆1 小时前
解密React虚拟DOM:我的高效渲染秘诀 🚀
前端·javascript·react.js
江城开朗的豌豆2 小时前
React应用优化指南:让我的项目性能“起飞”✨
前端·javascript·react.js
Asort2 小时前
JavaScript 从零开始(六):控制流语句详解——让代码拥有决策与重复能力
前端·javascript
EMT2 小时前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js
艾小码2 小时前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
前端康师傅3 小时前
JavaScript 作用域常见问题及解决方案
前端·javascript
Mintopia3 小时前
🚀 Next.js 全栈 E2E 测试:Playwright vs Cypress
前端·javascript·next.js
原生高钙3 小时前
JS设计模式指南
前端·javascript