wxml部分:这里引用的icon小图标可以自主更换
<view> <view class="titleCss"> <text class="titleTextCss">{{titleInfo}}</text> </view> <view class="weui-cells weui-cells_after-title"> <view class="weui-cell weui-cell_input"> <view class="weui-cell__hd"> <view class="weui-label labelCss"> <image src="../../icon/user_red.png" class="iconCss"></image> <text class="textCss">用户名:</text> </view> </view> <view class="weui-cell__bd"> <input class="weui-input inputCss" placeholder-class="place-holder" placeholder="请输入用户名"/> </view> </view> <view class="weui-cell weui-cell_input"> <view class="weui-cell__hd"> <view class="weui-label labelCss"> <image src="../../icon/password.png" class="iconCss"></image> <text class="textCss">密码:</text> </view> </view> <view class="weui-cell__bd"> <input class="weui-input inputCss" placeholder-class="place-holder" placeholder="请输入密码" password bindinput="passwordInput" focus="{{password_show}}"/> </view> </view> <view class="weui-cell weui-cell_input"> <view class="weui-label labelCss"> <image src="../../icon/safety.png" class="iconCss"></image> <text class="textCss">确认密码:</text> </view> <view class="weui-cell__bd"> <input class="weui-input inputCss" placeholder-class="place-holder" placeholder="请确认密码" password bindinput="passwordCheckInput"/> </view> </view> <view class="weui-cell weui-cell_input"> <view class="weui-label labelCss"> <image src="../../icon/realName.png" class="iconCss"></image> <text class="textCss">真实姓名:</text> </view> <view class="weui-cell__bd"> <input class="weui-input inputCss" placeholder-class="place-holder" placeholder="请输入用户姓名"/> </view> </view> <view class="weui-cell weui-cell_input"> <view class="weui-label labelCss"> <image src="../../icon/phone.png" class="iconCss"></image> <text class="textCss">手机号:</text> </view> <view class="weui-cell__bd"> <input class="weui-input inputCss" placeholder-class="place-holder" placeholder="请输入用户手机号" type="number"/> </view> </view> </view> <view class="page__bd page__bd_spacing addBnCss"> <button class="weui-btn" type="primary" bindtap="addUser">确定</button> </view> </view>
wxss部分:在这里引入weui.wxss文件,地址:https://files.cnblogs.com/files/qianyou304/weui.rar,如果改地址不行,则可以百度直接搜哈!
@import ‘../../lib/weui.wxss‘; .titleCss{ width: 100%; height: 15vh; text-align: center; } .titleTextCss{ font-size: 40rpx; line-height: 15vh; } .addBnCss{ margin-top:10vh; } .iconCss{ width: 3.5vh; height: 3.5vh; } .labelCss{ display: flex; } .textCss{ font-size: 32rpx; margin-left: 1vh; line-height: 3.5vh; } .inputCss{ margin-left: 2vh; } .place-holder{ font-size: 28rpx; }
js部分:
// pages/addOrEditUser/addOrEditUser.js Page({ /** * 页面的初始数据 */ data: { titleInfo: "添加新用户信息", password: "", password_check: "", password_show: false }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { }, addUser: function(){ var that = this; var password = that.data.password; var password_check = that.data.password_check; if(password == password_check){ }else{ wx.showModal({ title: ‘提示‘, content: ‘对不起!您输入的两次密码不同!‘, success(res) { if (res.confirm) { that.setData({ password_show: true }); } else if (res.cancel) { that.setData({ password_show: false }); } } }) } }, passwordInput: function (e) { this.setData({ password: e.detail.value }); }, passwordCheckInput: function (e) { this.setData({ password_check: e.detail.value }); } })