【小程序】input输入框双向绑定简单方法(含多个input,图示+代码)
【小程序】input输入框双向绑定简单方法(含多个input,图示+代码)
·
1、实现用户名和密码的input双向绑定(图)
2、wxml
主要是这三个选项
value="{{userName}}" bindchange="inputChange" data-id="userName"
完整代码:
<view class="title">请使用手机号登录</view>
<view class="text">
<input type="text" required="required" placeholder="请输入手机号" placeholder-style="color:rgb(170,170,170);" value="{{userName}}" bindchange="inputChange" data-id="userName">
</input>
</view>
<view class="text">
<input type="password" required="required" placeholder="请输入密码" focus="true"
placeholder-style="color:rgb(170,170,170);" value="{{passWord}}"
bindchange="inputChange" data-id="passWord">
</input>
</view>
<view class="title_2" onclick="window.location='RetrievePassword.html'">
忘记密码
</view>
<view class="btn" bindtap="login">
登 录
</view>
<view class="btn_2">
新用户注册
</view>
3、js
主要代码:
data: {
userName: "13103101099",
passWord: "8384250"
},
login: function () {
wx.showModal({
title: '提示',
content: '手机号:' + this.data.userName+' 密码:'+this.data.passWord,
success: function (res) {
if (res.confirm) {
}
}
})
},
inputChange: function (e) {
this.setData({
[e.target.dataset.id]: e.detail.value
})
},
完整代码:
// pages/login/login.js
Page({
/**
* 页面的初始数据
*/
data: {
userName: "13103101099",
passWord: "8384250"
},
login: function () {
wx.showModal({
title: '提示',
content: '手机号:' + this.data.userName+' 密码:'+this.data.passWord,
success: function (res) {
if (res.confirm) {
}
}
})
},
inputChange: function (e) {
this.setData({
[e.target.dataset.id]: e.detail.value
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
4、wxss
.title {
height: 70px;
text-align: center;
font-size: 18px;
font-weight: bold;
padding-top: 50px;
letter-spacing: 1px;
color: rgb(88, 88, 88);
/* background-color: yellowgreen; */
}
.text {
height: 60px;
margin: 0 auto;
display: flex;
text-align: center;
justify-content: center;
}
.text input {
border: 1px solid rgb(216, 216, 216);
width: 94%;
height: 40px;
border-radius: 5px;
font-size: 16px;
text-align: left;
color: rgb(15, 15, 15);
padding-left: 20px;
box-sizing: border-box;
}
.title_2 {
height: 50px;
line-height: 30px;
text-align: right;
color: rgb(233, 2, 2);
padding-right: 25px;
}
.btn {
height: 40px;
width: 94%;
text-align: center;
margin: 0 auto;
background-color:rgb(255,0,0);
border-radius: 5px;
font-size: 18px;
line-height: 40px;
color:white;
margin-bottom: 40px;
}
.btn_2 {
height: 40px;
width: 94%;
text-align: center;
margin: 0 auto;
background-color:rgb(255,248,248);
border-radius: 5px;
font-size: 17px;
line-height: 40px;
color:rgb(240, 36, 36);
margin-bottom: 25px;
border:1px rgb(250, 225, 225) solid;
}
.title {
height: 70px;
text-align: center;
font-size: 18px;
font-weight: bold;
padding-top: 50px;
letter-spacing: 1px;
color: rgb(88, 88, 88);
/* background-color: yellowgreen; */
}
.text {
height: 60px;
margin: 0 auto;
display: flex;
text-align: center;
justify-content: center;
}
.text input {
border: 1px solid rgb(216, 216, 216);
width: 94%;
height: 40px;
border-radius: 5px;
font-size: 16px;
text-align: left;
color: rgb(15, 15, 15);
padding-left: 20px;
box-sizing: border-box;
}
.title_2 {
height: 50px;
line-height: 30px;
text-align: right;
color: rgb(233, 2, 2);
padding-right: 25px;
}
.btn {
height: 40px;
width: 94%;
text-align: center;
margin: 0 auto;
background-color:rgb(255,0,0);
border-radius: 5px;
font-size: 18px;
line-height: 40px;
color:white;
margin-bottom: 40px;
}
.btn_2 {
height: 40px;
width: 94%;
text-align: center;
margin: 0 auto;
background-color:rgb(255,248,248);
border-radius: 5px;
font-size: 17px;
line-height: 40px;
color:rgb(240, 36, 36);
margin-bottom: 25px;
border:1px rgb(250, 225, 225) solid;
}
更多推荐
已为社区贡献23条内容
所有评论(0)