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

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


上代码

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;
}

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

相关推荐
狂团商城小师妹2 小时前
XYlease租赁商城小程序
微信·微信小程序·小程序
saadiya~3 小时前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts
百锦再4 小时前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
瓜瓜怪兽亚5 小时前
前端基础知识---Ajax
前端·javascript·ajax
AI智能研究院5 小时前
(四)从零学 React Props:数据传递 + 实战案例 + 避坑指南
前端·javascript·react.js
qq7798233405 小时前
React组件完全指南
前端·javascript·react.js
EndingCoder5 小时前
MongoDB基础与Mongoose ODM
服务器·javascript·数据库·mongodb·中间件·node.js
qq7798233406 小时前
React Hooks完全指南
前端·javascript·react.js
Moment6 小时前
性能狂飙!Next.js 16 重磅发布:Turbopack 稳定、编译提速 10 倍!🚀🚀🚀
前端·javascript·后端
软件技术NINI6 小时前
html css js网页制作成品——HTML+CSS仙台有树电视剧网页设计(5页)附源码
javascript·css·html