微信小程式 picker元件運用物件陣列
阿新 • • 發佈:2018-11-11
官方文件 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() { } })
這是我要呼叫的物件陣列
在元件內運用方法