1. 程式人生 > >微信小程式 picker元件運用物件陣列

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

  }
})

這是我要呼叫的物件陣列

在元件內運用方法