官方文档 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() {
}
})
这是我要调用的对象数组
在组件内运用方法