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

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


上代码

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

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

相关推荐
阿珊和她的猫1 小时前
深入剖析 Vue Router History 路由刷新页面 404 问题:原因与解决之道
前端·javascript·vue.js
web打印社区10 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
YiHanXii11 小时前
this 输出题
前端·javascript·1024程序员节
维他命Coco11 小时前
js常见开发学习
javascript
!win !13 小时前
分享二个实用正则
javascript·正则表达式
xw513 小时前
分享二个实用正则
javascript·正则表达式
刘新明198913 小时前
算法还原案例4-OLLVM_MD5
开发语言·前端·javascript·1024程序员节
诚实可靠王大锤13 小时前
react-native实现多列表左右滑动+滚动TabBar悬停
javascript·react native·react.js·1024程序员节
疯狂的沙粒14 小时前
前端开发【工具函数】基于dayjs 封装的DateUtils工具函数,可以直接拿着使用
前端·javascript·vue.js·1024程序员节
jingling55514 小时前
CSS进阶 | 不用一行JS!用纯CSS打造会动的现代化单页应用(3D翻转卡片)
前端·javascript·css