微信小程序 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() {

  }
})

这是我要调用的对象数组

在组件内运用方法

猜你喜欢

转载自blog.csdn.net/onion_line/article/details/83008623