如何实现,在一个文本框中输入内容的同时在文本框下同时显示框中的内容,并且在输入内容大于10时上传至云数据库中,wxml语言
给元素绑定属性bindinput,像这样
<input value="{{变量名}}" type="number" placeholder="0" bindinput="函数名"/>
然后在wxjs中命名函数中通过变量再赋值到界面,然后在函数里加入请求存入数据到云数据库的接口,把自己的参数post上就可以了。
app.js,【env: 'as-7g1dqbrma69ca4c1',】这个要换成你自己的资源
// app.js
App({
onLaunch: function () {
if (!wx.cloud) {
console.error('请使用 2.2.3 或以上的基础库以使用云能力');
} else {
wx.cloud.init({
// env 参数说明:
// env 参数决定接下来小程序发起的云开发调用(wx.cloud.xxx)会默认请求到哪个云环境的资源
// 此处请填入环境 ID, 环境 ID 可打开云控制台查看
// 如不填则使用默认环境(第一个创建的环境)
env: 'as-7g1dqbrma69ca4c1',
traceUser: true,
});
}
this.globalData = {};
}
});
// pages/test/test.js
Page({
/**
* 页面的初始数据
*/
data: {
desc: null,
},
onDescInput(e) {
const desc = e.detail.value
this.setData({
desc
})
if (desc > 10) {
wx.cloud.database().collection('todo').add({
data: {
desc
}
}).then(console.log).catch(console.log)
}
},
})
<!--pages/test/test.wxml-->
<view>
<input class="input" bindinput="onDescInput" value="{{desc}}" type="number" placeholder="请输入数字" />
<view class="view" wx:if="{{desc!=null}}">{{desc}}</view>
</view>
/* pages/test/test.wxss */
.input{
border: green 1px solid;
}
.view{
background-color: grey;
color: red;
margin-top: 1rem;
}