小程序:封装双向数据绑定
程序员文章站
2022-03-21 08:04:14
适合项目表单比较少的微信开发者工具没有像vue上的v-model直接使用的双向数据绑定功能,所以要利用小程序 的 bindinput=“inputgetName” 取实现,下面附上代码:在xxx.wxml文件中在xxx.js文件中data: { phone: null },userPhoneInput: function(e) { thi...
适合项目表单比较少的
微信开发者工具没有像vue上的v-model直接使用的双向数据绑定功能,所以要利用小程序 的 bindinput=“inputgetName” 取实现,下面附上代码:
- 在xxx.wxml文件中
<input bindinput="userPhoneInput" placeholder="请输入您的手机号" />
- 在xxx.js文件中
data: {
phone: null
},
userPhoneInput: function(e) {
this.setData({
phone: e.detail.value
})
},
- 这样 this.data.phone就可以像在vue中this.phone一样去使用了,完整代码如下:
login.wxml:
login.js:
封装全局使用,适合表单项较多的项目
首先我们把绑定逻辑抽出来单独放到一个js文件中,在那个页面使用就在那哪个页面引入,不用像上面手机号,验证码,要写两个,碰到表单有n项的就要写n个bindinput的函数
- 首先在建一个wx-model.js文件,这个我放到了utils文件里面:
- 在 login.js里面引入
- 在login.wxml里面使用
- 附上所有代码
// wx-model.js
module.exports = {
inputgetName(e) {
let name = e.currentTarget.dataset.name;
var value = e.detail
this.setData({
[name]: value
})
}
}
// login.wxml
<!--pages/com/login/login.wxml-->
<view class="loginIndex">
<image class="logo" src="../../../static/images/x_logo.png"></image>
<view class="form">
<van-field bindinput="inputgetName" data-name='email' left-icon="envelop-o" placeholder="{{L.email}}" />
<van-field bindinput="inputgetName" data-name='password' left-icon="bag-o" placeholder="{{L.pwd}}" right-icon="{{eye}}" type="{{pwdtype}}" bind:click-icon='changeEye' />
</view>
<view class="login button" bindtap="loginEmail">{{L.login}}</view>
<view class="bottom">
<image class="wx" bindtap="loginwx" src="../../../static/images/weixin.png"></image>
<view class="tip fosi28 col2">
<text class="col1">{{L.tip1}}</text>
<text>{{L.tip2}}</text>
<text>{{L.tip3}}</text>
</view>
</view>
</view>
// login.js
// pages/my/my/my.js
import http from '../../../utils/api'
let api = http.login
import LangUtils from '../../../utils/i18n'
let langSrc = LangUtils.getLangSrc()
var commonMixin = require('../../../utils/wx-model')
Page(Object.assign({
/*** 页面的初始数据*/
data: {
L: {
...langSrc.login
},
eye: 'closed-eye',
pwdtype: 'password',
email: '',
password: ''
},
/*** 生命周期函数--监听页面显示*/
onShow: function () {
this.setLanguage();
},
/*** 重新设置语言*/
setLanguage() {
langSrc = LangUtils.getLangSrc()
this.setData({
L: {
...langSrc.login
},
})
},
// 邮箱登录
loginEmail(){
console.log(this.data);
return
api.emailLogin({
'username': this.data.email,
'password': this.data.password
}, {
"showLoading": "true",
"loadingTitle": ""
})
.then(res => {
console.log(res);
})
},
// 密码显示
changeEye(){
var im = this.data.eye == 'closed-eye' ? 'eye-o' : 'closed-eye'
var type = this.data.eye == 'closed-eye' ? 'text' : 'password'
this.setData({
eye: im,
pwdtype: type
})
}
},commonMixin))
End
后面会上一些小程序实现国际化
本文地址:https://blog.csdn.net/buzhao1624/article/details/107213816