zoukankan      html  css  js  c++  java
  • 微信小程序--问题汇总及详解之picker 增、删

    <block wx:for="{{salesList}}" wx:for-index="index" wx:key="id" wx:for-item="item">
          <view class="con_txt">
            <view class="con_txt1" style="margin-left:30rpx;140rpx">销售品申请</view>
            <view class="con_txt1 con_txt2">
              <view class="section">
                <picker bindchange="bindPickerChange" value="{{item.option}}" range="{{objectArray}}" range-key="good_name" data-id="{{objectArray[item.option].id}}" data-index="{{index}}">
                  <view class="picker" style="height:70rpx;position:relative">
                    {{objectArray[item.option].good_name}}
                    <image src="../Image/select.png" style="40rpx;height:40rpx;position:absolute;left:80%;top:20%;"></image>
                  </view>
                </picker>
              </view>
            </view>
            <view class="con_txt1">
              <view class="section2">
                <input  value="{{salesList[index].nums}}" name="count" bindinput="numChangeS" data-index="{{index}}" style="text-align:center;height:66rpx !important;padding-top:4rpx;"  placeholder-style="color:#ddd;text-align:center;margin-top: 0px;margin-left:-8rpx" placeholder="数量"/>
              </view>
            </view>
            <button class="btnC" hover-class="none" bindtap="reduceSales" data-index="{{index}}">-</button>
          </view>
        </block>
        <view class="hb" bindtap="addSales">
          <image src="../Image/addT.png" style="30rpx;height:30rpx;float:left;margin-left:38%;"></image>
          <view class="text3">继续增加商品</view>
        </view>
    data: {
        salesList: []    //定义一个空数组
      },
    //销售品删除一行
      reduceSales: function (e) {
        var that = this;
        var index = e.currentTarget.dataset.index;
        var list = that.data.salesList;
        if (list.length === 1) {
          return;
        }
        list.splice(index, 1);
        this.setData({
          salesList: list
        })
      },
    //点击添加销售品
      addSales: function (e) {
        var that = this;
        var list = that.data.salesList;
        var r = /^+?[1-9][0-9]*$/;  //正整数 
        var tip = '数量请输入正整数~~';
        for (var i = 0; i < list.length; ++i) {
          if (list[i].nums <= 0 || !r.test(list[i].nums)) {
            wx.showToast({
            title: tip,
            image: '../Image/error.png',
            duration: 2000
          });
          return;
          }
        }
        var options = this.data.objectArray
        this.data.salesList.push({ id: options[0].id, nums: '', option: 0 })  //添加新行的时候nums初始为0
        this.setData({
          salesList: this.data.salesList
        })
    
      },
    //销售品申请类
      bindPickerChange: function (e) {
        var arr = this.data.objectArray  //数组;
       var value = e.detail.value; //数组子集
    var list = this.data.salesList; //数组传递某一项的容器
       var index = e.currentTarget.dataset.index;  //索引

    list[index] = arr[value] //被选中数组的某一项赋给容器的相对应的某一项容器

    list[index].option = value //数组子集赋给某一项相对应的容器索引
      this.setData({
          salesList: list
        })
      },
      //申请数量
      numChangeS: function (e) {
        var _that = this;
        var index = e.currentTarget.dataset.index;
        var list = this.data.salesList
        list[index].nums = e.detail.value
        this.setData({
          salesList: list
        })
      },
    
    // 页面初始化 options为页面跳转所带来的参数
      onLoad: function (options) {
        var that = this
        wx.request({
          url: 'https://....',
          method: 'GET',
          header: { 'content-type': 'application/json' },
          data: {},
          success: function (res) {   // success
            var options = res.data.goods;
            that.data.salesList.push({ id: options[0].id, nums: '', option: 0 })
            that.data.materielList.push({ id: options[0].id, nums: '', option: 0 })
            that.data.activesList.push({ id: options[0].id, option: 0 })
            that.setData({
              objectArray: options,
              salesList: that.data.salesList,
            })
          },
        })
      },
  • 相关阅读:
    MySQL之数据库结构优化
    MySQL之索引
    Spring之单元测试
    Spring之IOC容器加载初始化的方式
    LeetCode之Sort List
    [译]Java 垃圾回收的监控和分析
    [译]Java垃圾回收器的类型
    [译]Java垃圾回收是如何工作的
    [译]Java 垃圾回收介绍
    JSP之项目路径问题(${pageContext.request.contextPath},<%=request.getContextPath()%>以及绝对路径获取)
  • 原文地址:https://www.cnblogs.com/JinQing/p/6673665.html
Copyright © 2011-2022 走看看