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

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


上代码

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

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

相关推荐
gnip11 分钟前
总结一期正则表达式
javascript·正则表达式
爱分享的程序员29 分钟前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘34 分钟前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
你这个年龄怎么睡得着的36 分钟前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
南屿im42 分钟前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript
西陵1 小时前
Nx带来极致的前端开发体验——借助CDD&TDD开发提效
前端·javascript·架构
叹一曲当时只道是寻常1 小时前
vue中添加原生右键菜单
javascript·vue.js
旷世奇才李先生2 小时前
Next.js 安装使用教程
开发语言·javascript·ecmascript
Mintopia3 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
慌糖3 小时前
RabbitMQ:消息队列的轻量级王者
开发语言·javascript·ecmascript