小程序--滚动选择器picker篇

小程序—–滚动选择器picker篇

常见的选择器有几种，时间选择器、日期选择器、省市区选择器，在小程序中，这几种选择器可以直接通过设置picker的mode属性，除了可以使用小程序自带的选择器。也可以自定义选择器，也就是普通选择器。

普通选择器（自定义）

在此，我自定义一个简单的城市选择器，可选择值为countries:['中国','美国','日本','法国','意大利','加拿大','德国','新加坡']

<view>
  <view class="section__title">城市选择器</view>
  <picker bindchange="bindCountryChange" value="{{index}}" range="{{countries}}">
    <view class="picker">
      当前选择：{{countries[index]}}
    </view>
  </picker>
</view>

常见选择器（时间、日期、省市区选择器）

<view>
  <view class="section__title">时间选择器</view>
  <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
    <view class="picker">
      当前选择: {{time}}
    </view>
  </picker>
</view>

<view>
  <view class="section__title">日期选择器</view>
  <picker mode="date" value="{{date}}" start="2014-09-01" end="2017-09-01"         bindchange="bindDateChange">
    <view class="picker">
      当前选择: {{date}}
    </view>
  </picker>
</view>
<view>
  <view class="section__title">省市区选择器</view>
  <picker mode="region" bindchange="bindRegionChange" value="{{region}}">
    <view class="picker">
      当前选择: {{region[0]}} {{region[1]}} {{region[2]}}
    </view>
  </picker>
</view> 

这几个例子都比较简单，想了解picker更多属性，可以到W3Cschool官网进一步了解。

// .js
const date = new Date()
const years = []
const months = []
const days = []

for(let i=1990;i<=date.getFullYear();i++){
  years.push(i)
}

for(let i=1;i<=12;i++){
  months.push(i)
}

for(let i=1;i<=31;i++){
  days.push(i)
}

Page({
  data:{
    years:years,
    year:date.getFullYear(),
    months:months,
    month:8,
    days:days,
    day:22,
    value:[999,7,21],
    date: '2016-09-01',
    time: '12:01',
    region: ['广东省', '广州市', '海珠区'],
    countries:['中国','美国','日本','法国','意大利','加拿大','德国','新加坡'],
    index:0
  },
  bindChange:function(e){
    const val = e.detail.value
    this.setData({
      year:this.data.years[val[0]],
      month:this.data.months[val[1]],
      day:this.data.days[[val[2]]]
    })
  },
  bindDateChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      date: e.detail.value
    })
  },
  bindTimeChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      time: e.detail.value
    })
  },
  bindRegionChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      region: e.detail.value
    })
  },
  bindCountryChange:function (e){
    this.setData({
      index:e.detail.value
    })
  }
})

// .wxss
.showdate{
  width:100%;
  height:100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
picker-view{
  width:100%;
  height:300px
}
picker-view-column{
  width:33.3%;
  text-align: center;
  line-height: 50px

} 
.section__title{
  height:30px;
  line-height:30px;
  margin-top:20px
}
.picker{
  height:45px;
  line-height: 45px;
  background-color:#fff
}