微信小程序> 小程序使用iViewWeapp组件传值问题

小程序使用iViewWeapp组件传值问题

浏览量:3315 时间: 来源:小胖龙

首先,简单说一下,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//jssetNumber(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来赋值给数组中某个元素属性。

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎