zoukankan      html  css  js  c++  java
  • 微信小程序使用setData修改数组中的指定下标的属性值

    注释的比较详细,就不过做多解释了。

    //index.js
    //获取应用实例
    const app = getApp()
    
    Page({
      // 这里data就是你当前界面所有的值。包括你后期动态添加的值都在这里
      data: {
        list: [{ //定义数组
            number: 1
          },
          {
            number: 1
          },
          {
            number: 1
          },
          {
            number: 1
          },
          {
            number: 1
          }
        ]
      },
      //事件处理函数
      itemSelect: function(e) {
        // 这里说一下他们的区别:target指向发生事件的组件,currentTarget指向绑定事件的组件
        // 1.currentTarget: 绑定的事件当前元素及其子元素都会触发
        // 2.target: 绑定的事件 子元素不会被触发事件
        var _this = this;
        console.log(e); //仔细看控制台
        //list就是你js中data中的定义的一个数组变量,[]里面的值代表数组的下标,number是你申明的这个数组中的key,拼接在一起,结果就是当前下标的值
        var index = "list[" + e.currentTarget.dataset.index + "].number"; //这里必须这样拼接
        //因为小程序中分有逻辑层和渲染层等。所以我们需要用setdata函数,渲染到视图界面。
        _this.setData({ //异步刷新,就是渲染
        //这里进行赋值
          [index]: 0 //修改值为0
        })
      },
    
    })
    
    <!--index.wxml-->
    <view class="container">
      <!-- wx:key可以什么都不用写,我就是为了不让控制台出现警告,强迫症 -->
      <view class='bg' wx:for="{{list}}" wx:key="">
        <!-- 这里的{{index}}是wx:for自带的,直接引用就行了 -->
        <text bindtap='itemSelect' data-index="{{index}}">number:{{item.number}}</text>
      </view>
    </view>
    
    /**app.wxss**/
    
    .container {
      height: 100%;
      display: flex;
      flex-direction: column;
      padding: 20rpx;
    }
    
    .bg {
      color: green;
      border: 2rpx solid crimson;
      margin: 20rpx;
    }
    
    text {
      padding: 10rpx;
    }
    
    

    懒得复制的朋友,可以点一下~
    Demo地址

  • 相关阅读:
    如何:为 Silverlight 客户端生成双工服务
    Microsoft Sync Framework 2.1 软件开发包 (SDK)
    Windows 下的安装phpMoAdmin
    asp.net安全检测工具 Padding Oracle 检测
    HTTP Basic Authentication for RESTFul Service
    Windows系统性能分析
    Windows Server AppFabric Management Pack for Operations Manager 2007
    Mongo Database 性能优化
    服务器未能识别 HTTP 标头 SOAPAction 的值
    TCP WAIT状态及其对繁忙的服务器的影响
  • 原文地址:https://www.cnblogs.com/guowenrui/p/10362730.html
Copyright © 2011-2022 走看看