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

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


上代码

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

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

相关推荐
工业甲酰苯胺3 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
谢尔登7 小时前
【React Native】ScrollView 和 FlatList 组件
javascript·react native·react.js
然我7 小时前
面试官:如何判断元素是否出现过?我:三种哈希方法任你选
前端·javascript·算法
kk_stoper8 小时前
如何通过API查询实时能源期货价格
java·开发语言·javascript·数据结构·python·能源
晨枫阳8 小时前
前端VUE项目-day1
前端·javascript·vue.js
颜酱8 小时前
抽离ant-design后台的公共查询设置
前端·javascript·ant design
绅士玖8 小时前
JavaScript 设计模式之单例模式🚀
前端·javascript·设计模式
Dream耀8 小时前
useReducer:React界的"灭霸手套",一个dispatch搞定所有状态乱局
前端·javascript·react.js
余大侠在劈柴9 小时前
pdf.js 开发指南:在 Web 项目中集成 PDF 预览功能
前端·javascript·学习·pdf
拾光拾趣录9 小时前
JavaScript屏幕切换检测方案
前端·javascript