小程序使用iView Weapp组件传值问题

本文介绍了在使用iView Weapp组件时遇到的传值问题,特别是当在for循环中使用input-number组件时,由于API限制,无法直接获取对应的数组索引。解决方案是通过添加小程序自带的bindtap事件,结合全局变量与自定义方法实现传值,从而更新数组中相应元素的值。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

首先,简单说一下,iview使用方式(官方文档很明确了),首先下载iview提供的压缩包,把里面的dist文件夹解压到项目目录中
这里写图片描述
然后要在哪个页面使用哪个组件,就在该页面的json文件中

{
  "usingComponents": {
    "i-tabs": "../../dist/tabs/index",
    "i-tab": "../../dist/tab/index",
    "i-icon": "../../dist/icon/index",
    "i-input-number": "../../dist/input-number/index",
    "i-checkbox-group": "../../dist/checkbox-group/index",
    "i-checkbox": "../../dist/checkbox/index",
    "i-radio-group": "../../dist/radio-group/index",
    "i-radio": "../../dist/radio/index",
    "i-toast": "../../dist/toast/index"
  } 
}

今天要说的是因为iview weapp,包括vant(有赞出品的小程序组件库),提供的组件偏少,提供的组件api也偏少,比如我用input-number的过程中,官方文档提供的api只有一个

//官方示例
<i-input-number value="{{ value2 }}" min="0" max="100" step="0.2" 
    bindchange="handleChange2" />
//js    
handleChange2 ({ detail }) {
    this.setData({
        value2: detail.value
    })
}

这里写图片描述

这个时候出现一个问题,他的长时间只是用来取当前number-input的值的,但是我在项目中将这个组件写在了for循环里,也就是说 我至少需要一个index,才能知道我改变的是数组中谁的number,上代码:

<block wx:for='{{productList}}'>
    //删除多余代码——————————————————

       <i-input-number bindtap='setNumber' id='{{index}}' i-class='num-in' 
       value="{{item.quantnum}}" min="1" max="20" bindchange="numberChange" />

    //删除多余代码——————————————————
</block>
//js
setNumber(event) {
  this.setData({
    [`productList[${event.target.id}].quantnum`]: this.data.quantnum
  })
},
// 修改数量
numberChange({
  detail
}) {
  this.setData({
    quantnum: detail.value
  })
},

很简单,我添加了一个小程序自带的绑定事件bindtap,把当前index传了进去,numberChange方法改变一个全局变量quantnum,然后将quantnum通过bindtap方法绑定的setNumber来赋值给数组中某个元素属性。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值