zoukankan      html  css  js  c++  java
  • 入坑微信小程序必经之路(五)循环动态添加删除列表

    <block wx:for="{{scoreList}}" wx:key>
      <view class="cu-bar bg-white solid-bottom margin-top">
        <view class="action">
          <text class="cuIcon-title text-brown"></text> 第{{item.num}}节
        </view>
      </view>
      <view class="cu-form-group">
        <view class="title">分数</view>
        <picker bindchange="scoreChange" value="{{item.score}}" data-num="{{item.num}}" range="{{scoreArr}}">
          <view class="picker">
            {{item.score?scoreArr[item.score]:'请选择'}}
          </view>
        </picker>
      </view>
    </block>
    <view class="padding flex flex-wrap justify-between align-center">
      <button class="cu-btn bg-gradual-pink cuIcon-add" bindtap="objectAdd">增加</button>
      <button class="cu-btn bg-gradual-pink cuIcon-move" bindtap="objectMove">减少</button>
    </view>
    

      js

    Page({
       data: {
         scoreList: [], //分数数组
         scoreArr: ["0分", "1分", "2分", "3分", "4分", "5分"],
         num: 0,
       },
       scoreChange(e) {
         var that = this;
         var tempList = that.data.scoreList;
         for (var i = 0; i < tempList.length; i++) {
           //找到所选的下拉框赋值
           if (tempList[i]["num"] == e.currentTarget.dataset.num) {
             tempList[i]["score"] = e.detail.value;
             break;
           }
         }
         //改变后的值赋值scoreList重新绑定
         that.setData({
           scoreList: tempList
         })
         console.log('scoreList=' + JSON.stringify(that.data.scoreList)) //最终提交到后台得到数据
       },
       //添加一个列表
       objectAdd(e) {
         var that = this
         var addlist = this.data.scoreList;
         var obj = {
           score: null,
           num: this.data.num + 1
         }
         addlist.push(obj)
         this.setData({
           scoreList: addlist,
           num: this.data.num + 1
         })
       },
       //减少一个列表 从最后一个开始减少
       objectMove(e) {
         if (this.data.scoreList.length > 0) {
           this.data.scoreList.splice(this.data.scoreList.length - 1, 1);
           this.setData({
             scoreList: this.data.scoreList,
             num: this.data.num - 1,
           })
         }
       }
     })
    

      转自:https://www.cnblogs.com/yejiao/p/11389509.html

  • 相关阅读:
    434. Number of Segments in a String 字符串中的单词个数
    C 递归
    Linux vi/vim
    CSS outline-style 属性
    Object.getPrototypeOf (Object) – JavaScript 中文开发手册
    Java 多线程编程
    HTML canvas strokeText() 方法
    HTML DOM Input Text readOnly 属性
    AngularJS ng-open 指令
    filecmp (File & Directory Access) – Python 中文开发手册
  • 原文地址:https://www.cnblogs.com/jstblog/p/15226901.html
Copyright © 2011-2022 走看看