在开发微信小程序的页面中如何通过点击按钮来填写任务信息并添加到当前页面中而且使它展现出来写出相关代码
- 在wxml中添加一个按钮和一个表单:
<view>
<button bindtap="addTask">添加任务</button>
<form bindsubmit="submitForm">
<input type="text" name="taskName" placeholder="请输入任务名称" />
<input type="text" name="taskDetail" placeholder="请输入任务详情" />
<button formType="submit">提交</button>
</form>
<view wx:for="{{taskList}}">
<view>{{item.taskName}}</view>
<view>{{item.taskDetail}}</view>
</view>
</view>
- 在js中添加相关逻辑:
Page({
data: {
taskList: []
},
addTask: function () {
this.setData({
isShowForm: true
})
},
submitForm: function (e) {
var taskName = e.detail.value.taskName;
var taskDetail = e.detail.value.taskDetail;
var taskList = this.data.taskList;
taskList.push({
taskName: taskName,
taskDetail: taskDetail
});
this.setData({
taskList: taskList,
isShowForm: false
});
}
})
通过点击按钮,弹出表单,填写任务信息后提交,将任务信息添加到当前页面中,并展现出来
原文地址: https://www.cveoy.top/t/topic/eFAu 著作权归作者所有。请勿转载和采集!