微信小程序 picker组件运用对象数组

官方文档 https://developers.weixin.qq.com/miniprogram/dev/component/picker.html

wxml:

<view class='input-box flexac'>
  <text>积分抵扣(%)</text>
  <view class="section flexac">
    <picker bindchange="points_" value="{{points[pindex].text}}" range="{{points}}" range-key="{{'text'}}">
      <view class="picker">
        {{points[pindex].text}}
      </view>
    </picker>
      <input name="is_points" value="{{points[pindex].text}}" placeholder='请输入积分抵扣' type="number" style='display:none;'></input>
    <image src='/img/img/rightto.png' class='right'></image>
  </view>
</view>

wxss:

.flexac {
  display: flex;
  align-items: center;
}

.input-box {
  border-top: 1rpx solid #efefef;
  width: 100%;
  border-bottom: 1rpx solid #efefef;
  height: 88rpx;
  background: #fff;
  justify-content: space-between;
}

.input-box text {
  font-size: 30rpx;
  margin-left: 25rpx;
  color: rgba(51, 51, 51, 1);
}

.right {
  width: 11rpx;
  height: 19rpx;
  margin-left: 15rpx;
  margin-right: 15rpx;
}

.picker {
  font-size: 30rpx;
  color: #666;
}

js:

Page({


  data: {
    points: [{
        num: 1,
        text: "不参与",
      }, {
        num: 2,
        text: "5",
      },
      {
        num: 3,
        text: "10",
      },
      {
        num: 4,
        text: "15",
      },
      {
        num: 5,
        text: "20",
      },
      {
        num: 6,
        text: "25",
      },
      {
        num: 7,
        text: "30",
      },
      {
        num: 8,
        text: "35",
      },
      {
        num: 9,
        text: "45",
      },
      {
        num: 10,
        text: "50",
      }, {
        num: 2,
        text: "55",
      },
      {
        num: 3,
        text: "60",
      },
      {
        num: 4,
        text: "65",
      },
      {
        num: 5,
        text: "70",
      },
      {
        num: 6,
        text: "75",
      },
      {
        num: 7,
        text: "80",
      },
      {
        num: 8,
        text: "85",
      },
      {
        num: 9,
        text: "90",
      },
      {
        num: 10,
        text: "95",
      },
      {
        num: 10,
        text: "100",
      }
    ],
    pindex: 0,
  },

  points_: function(e) {
    console.log('积分抵扣', e.detail.value)
    this.setData({
      pindex: e.detail.value
    })
  },

  onLoad: function(options) {
    console.log('points', this.data.points)
  },

  onReady: function() {

  },


  onShow: function() {

  }
})

这是我要调用的对象数组

在组件内运用方法

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值