首页 > 编程语言 >小程序动态增加删除view

小程序动态增加删除view

时间:2023-02-28 18:06:32浏览次数:34  
标签:info function 删除 index -- material let 动态 view


wxml文件:

<view class="page" data-weui-theme="{{theme}}">
<view class="weui-form">
<view class="weui-form__text-area">
<h2 class="weui-form__title">联营户发货单</h2>
<!-- <view class="weui-form__desc">展示表单页 信息区域组成。</view> -->
</view>
<view class="weui-form__control-area">
<view class="weui-cells__group weui-cells__group_form">
<!-- <view class="weui-cells__title">表单组标题</view> -->
<view class="weui-cells weui-cells_form">
<view class="weui-cell weui-cell_active">
<view class="weui-cell__hd">
<label class="weui-label">编码</label>
</view>
<view class="weui-cell__bd">
<input class="weui-input" placeholder="填写编码" placeholder-class="weui-input__placeholder" />
</view>
</view>
<view class="weui-cell weui-cell_active">
<view class="weui-cell__hd">
<label class="weui-label">制单人</label>
</view>
<view class="weui-cell__bd">
<input class="weui-input" placeholder="填写制单人" placeholder-class="weui-input__placeholder" />
</view>
</view>
<view class="weui-cell weui-cell_active">
<view class="weui-cell__hd">
<label class="weui-label">制单日期</label>
</view>
<view class="weui-cell__bd">
<picker mode="date" value="{{date}}" start="2020-03-01" end="2025-09-01" bindchange="bindDateChange">
<a>{{date}}</a>
</picker>
</view>
</view>

<view>
<view class="weui-cells__title">发货单分录</view>
</view>
</view>

<!--分录集合-->
<view class="etrys" wx:for="{{info.entrys}}" wx:key="key" wx:for-index="idx" wx:for-item="entry" >
<view> {{idx}}</view>
<view class="entry">
<view class="juedui" >
<!--分录删除按钮-->
<view class="removeEntry" data-idx="{{idx}}" >
<icon type="cancel" size="30" bindtap='removeEntry' data-idx="{{idx}}" />
</view>
</view>

<view>
<view class="weui-cell">
<view class="weui-cell__hd">
<label class="weui-label">物料</label>
</view>
<view class="weui-cell__bd">
<input class="weui-input" data-idx="{{idx}}" value="{{entry.material}}" bindinput="setMaterial" placeholder="请输入物料" placeholder-class="weui-input__placeholder" />
</view>
</view>
<view class="weui-cell weui-cell_active">
<view>
<label class="weui-label">分录字段2</label>
</view>
<view class="weui-cell__bd">
<input class="weui-input" data-idx="{{idx}}" value="{{entry.person}}" bindinput="setPerson" placeholder="填写制单人" placeholder-class="weui-input__placeholder" />
</view>
</view>
<view class="weui-cell weui-cell_active">
<view class="weui-cell__hd">
<label class="weui-label">分录字段</label>
</view>
<view class="weui-cell__bd">
<picker mode="date" value="{{date}}" data-idx='{{idx}}' start="2020-03-01" end="2025-09-01" bindchange="bindDateChange">
<a>{{date}}</a>
</picker>
</view>
</view>


</view>
<view class="entryBottom"></view>
</view>
</view>
<!--增加分录按钮-->
<view class="zengjia" bindtap='addEntry'>
<icon type="download" size="30" />
</view>

</view>
</view>


</view>

</view>

js:

// pages/ly/ly.js


/**
* entry 类 构造函数
* @param{String} material 物料
* @param{String} person 制单人
*
*/
function Entry(material, person) {
this.material = material;
this.person=person;
}

function Info(){
this.entrys=[];
}

Page({

/**
* 页面的初始数据
*/
data: {
date: '2020-03-01' ,
info:[]

},

init:function(){
let that=this;
this.setData({
info:new Info(),
});
},


setPerson: function (e) {
let index = parseInt(e.currentTarget.dataset.idx);
let person = e.detail.value;
let info = this.data.info;
info.entrys[index].person = person;
this.setData({
info: info
});
},

/**物料输入事件 */
setMaterial: function (e) {
let index = parseInt(e.currentTarget.dataset.idx);
let material = e.detail.value;
let info = this.data.info;
info.entrys[index].material = material;
this.setData({
info: info
});
},


/**时间 */
bindDateChange: function (e) {
this.setData({
date: e.detail.value
})
},
/**
* 生命周期函数--监听页面加载
*/
onl oad: function (options) {
this.init();
},

/**新增分录 */
addEntry:function(e){
let info=this.data.info;
info.entrys.push(new Entry());
this.setData({
info:info
});

},

/**新增分录 */
removeEntry:function(e){
console.log("删除按钮--");
let index = parseInt(e.currentTarget.dataset.idx);
console.log(index);
let info=this.data.info;
info.entrys.splice(index, 1);
//info.entrys.pop();
this.setData({
info: info
});
},

/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {

},

/**
* 生命周期函数--监听页面显示
*/
onShow: function () {

},

/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {

},

/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {

},

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {

},

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {

},

/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {

}
})

小程序动态增加删除view_字段

标签:info,function,删除,index,--,material,let,动态,view
From: https://blog.51cto.com/u_11343833/6091643

相关文章