本节内容
理解微信小程序的数据交互
在上一篇文章(控件与布局)主要介绍的页面的控件的展示和布局,如下图
83F07AE4-6917-4630-B53F-56D9C7CE4C8D.png
本篇就来演示一下数据是怎么交互的
我们的需求是在输入框输入内容后,点击提交按钮,在上面的标签上进行显示
- 第一步 在xxx.wxml 绑定两个事件 一个是监听输入框的值,一个是提交按钮的点击事件,代码如下
<view class = "container">
<view class = "text-section">
<text > {{name}}</text>
</view>
<view class ="input-section" >
// 输入事件 bindinput 绑定到函数inputName 上
<input placeholder="请输入您的姓名" bindinput="inputName"/>
</view>
<view class = "submit_section">
// bindtap 代表单击事件 绑定到方法tapSubmit 上
<button class = "submit" bindtap="tapSubmit">提交</button>
</view>
</view>
- 第二步 在js 文件中这两个方法
Page({
data:{
name:"这里会显示你输入的名字",
input_text:'' // 存放用户输入的值
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
},
// 用户通过键盘输入值时，就会触发这个函数
inputNamefunction(input){
var that = this;
console.log(input);
// 缓存用户输入的值,注意这里一次只能修改一个值
that.setData({
input_text:input.detail.value
});
}
// 当用户点击提交按钮 会 触发这个函数
bindButtonTap:function(){
var that = this;
// 我们将输入框的值 直接赋值给name 因为name 和text 标签进行了绑定所以直接会显示出来 不需要刷新
that.setData({
name:that.data.input_text
})
},
})
最终效果
