小程序动态增加删除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
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: 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 () {

  }
})

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值