有源码
微信小程序的picker类型很多，时间获取比较好获取，直接e.detail.value就可以获取，但是像很多是类别的获取，这样就很难获取了，因为你的e.detail.value获取到的是数组的下标，这样你无法获取你想要的数据，这样就导致无法和后台交互，下面我用一个具体的实例来讲一picker获取数组的数据：做的就是车位预约申请：
第一个问题：
选中数据但是无法再前段显示选中的数据（一定得加objectArray）
data: {
array: ['标间：168', '大床房：198', '商务房：268', '总统套房：368', '三人间：208', 'vip套房：108'],
objectArray: [
{
id: 0,
name: '标间：168'
},
{
id: 1,
name: '大床房：198'
},
{
id: 2,
name: '商务房：268'
},
{
id: 3,
name: '总统套房：368'
}
,
{
id: 4,
name: '三人间：208'
},
{
id: 5,
name: 'vip套房：108'
}
],
index: 0,
然后通过setdata给前段返回获取的下标
booktype:function(e){
console.log(e.detail.value)
this.setData({
index: e.detail.value
})
console.log(this.data.array[e.detail.value])
},
这样就可以将选中的数据在前段显示了
第二个问题就是：
获取的是下标，我们想要数组的数据，这时候你e.detail.value没有什么用。你要注意到你的数组在data里边，所以你需要data.array[e.detail.value]，本以为这样就成功了，但是这是js语言，data无法直接获取，需要用this获取上一层对象（不理解的话看一下js语言吧），这样就可以直接获取了
this.data.array[e.detail.value]
现在就可以拿到你的数据了。
最后我分享一下完整的代码：
wxml
<view class="ar_cont">
<button class="ar_book">车位申请</button>
<text>\n</text>
<text class="ar_cont_h1">车位号选择</text>
<view class="ar_picker_wrap">
<picker bindchange="booktype" value="{{index}}" range="{{array}}">
<view class="picker" bindchange="bindDateChange5">
车位号：{{array[index]}}
</view>
</picker>
</view>
<text>\n</text>
<text class="ar_cont_h1">使用开始时间</text>
<view class="ar_date_time">
<view class="ar_date">
<image src="../../image/date.png"></image>
<picker mode="date" placeholder="选择日期" value="{{date}}" start="2019-06-06" end="2019-09-01" bindchange="bindDateChange">
<view>
{{date}}
</view>
</picker>
</view>
<view class="ar_time">
<image src="../../image/time.png"></image>
<picker mode="time" placeholder="选择时间" value="{{time}}" start="01:00" end="24:00" bindchange="bindTimeChange">
<view>
{{time}}
</view>
</picker>
</view>
</view>
<text class="ar_cont_h1">使用结束时间</text>
<view class="ar_date_time">
<view class="ar_date">
<image src="../../image/date.png"></image>
<picker mode="date" placeholder="选择日期" value="{{date1}}" start="2019-06-06" end="2019-09-01" bindchange="bindDateChange1">
<view>
{{date1}}
</view>
</picker>
</view>
<view class="ar_time">
<image src="../../image/time.png"></image>
<picker mode="time" placeholder1="选择时间" value="{{time1}}" start="01:00" end="24:00" bindchange="bindTimeChange1">
<view>
{{time1}}
</view>
</picker>
</view>
</view>
<button class="ar_book" bindtap="apply">申请</button>
</view>
wxcss
a.container{
background:#fff;
}
.ar_coverpath{
width:100%;
margin:0rpx;
padding:0rpx;
height:175px;
}
.ar_coverpath image{
width:100%;
}
.ar_picker{
width:100%;
font-size:30rpx;
color:#000;
background: #efeff4;
margin:0;
}
.ar_picker .ar_picker_wrap{
width: 670rpx;
background: #fff url(../../images/arrow.png) no-repeat right center;
background-size:25rpx 14rpx;
background-position:650rpx;
border-radius:20rpx;
padding:20rpx;
margin:20rpx auto;
}
.ar_cont{
padding:20rpx 60rpx;
font-size:30rpx;
background: #fff;
margin-bottom:40rpx;
line-height: 45rpx;
color:#666666;
}
.ar_cont .ar_cont_h1{
font-size: 32rpx;
font-weight: 600;
line-height: 30rpx;
color:#000;
}
.ar_date_time{
width:100%;
display: flex;
flex-direction: row;
justify-content: space-between;
margin:10rpx 0rpx 60rpx;
}
.ar_date_time .ar_date,
.ar_date_time .ar_time{
width:47%;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.ar_date_time .ar_date image{
width:34rpx;
height:38rpx;
}
.ar_date_time .ar_time image{
width:45rpx;
height:38rpx;
}
.ar_date_time picker{
width:220rpx;
border:1px solid #ddd;
border-radius:8rpx;
padding:0rpx 10rpx;
margin-left:10rpx;
}
.input_msg{
border:1px solid #ddd;
border-radius:10rpx;
padding:0rpx 10rpx;
height:40px
}
.ar_book{
background:#4a90d2fd;
font-size: 32rpx;
color:#fff;
border-radius: 0rpx;
margin:40rpx 0rpx 10rpx;
}/* pages/book/book.wxss */
wxjs
Page({
data: {
array: ['标间：168', '大床房：198', '商务房：268', '总统套房：368', '三人间：208', 'vip套房：108'],
objectArray: [
{
id: 0,
name: '标间：168'
},
{
id: 1,
name: '大床房：198'
},
{
id: 2,
name: '商务房：268'
},
{
id: 3,
name: '总统套房：368'
}
,
{
id: 4,
name: '三人间：208'
},
{
id: 5,
name: 'vip套房：108'
}
],
index: 0,
// addrArray: util.replacePhone(mydata.userData().addrs, true),
addrIndex: 0,
date: '2019-7-1',
time: '12:00',
date1: '2019-7-1',
time1: '12:00',
bookToastHidden: true,
},
booktype:function(e){
console.log(e.detail.value)
this.setData({
index: e.detail.value
})
console.log(this.data.array[e.detail.value])
},
// 日期选择
bindDateChange: function (e) {
console.log('date picker发送选择改变，携带值为', e.detail.value)
wx.setStorageSync("begtime", e.detail.value)
this.setData({
date: e.detail.value
})
},
// 时间选择
bindTimeChange: function (e) {
//app.globalData.date1 = e.detail.value
console.log('time picker发送选择改变，携带值为', e.detail.value)
wx.setStorageSync("begtime1", e.detail.value)
this.setData({
time: e.detail.value
})
},
// 日期选择
bindDateChange1: function (e) {
console.log('date picker发送选择改变，携带值为', e.detail.value)
wx.setStorageSync("begtime2", e.detail.value)
this.setData({
date1: e.detail.value
})
},
// 时间选择
bindTimeChange1: function (e) {
//app.globalData.date1 = e.detail.value
console.log('time picker发送选择改变，携带值为', e.detail.value)
wx.setStorageSync("begtime3", e.detail.value)
this.setData({
time1: e.detail.value
})
},
aquery: function (e) {
var classid = e.detail.value
wx.setStorageSync("classid", classid)
},
aquery1: function (e) {
var count = e.detail.value
wx.setStorageSync("count", count)
},
aquery2: function (e) {
var applypeo = e.detail.value
wx.setStorageSync("applypeo", applypeo)
},
apply: function () {
var applypeo = wx.getStorageSync("applypeo")
var begtime = wx.getStorageSync("begtime")
var begtime1 = wx.getStorageSync("begtime1")
var begtime2 = wx.getStorageSync("begtime2")
var begtime3 = wx.getStorageSync("begtime3")
var begtime4 = begtime + " " + begtime1
var endtime = begtime2 + " " + begtime3
console.log(begtime4, endtime)
wx.request({
url: 'http://localhost:8080/lg/classroomController/wxaddapplyclassroom',
data: {
applypeo: applypeo,
begtime: begtime4,
endtime: endtime
},
success: function (res) {
var mess = res.data.mess
if (mess === "成功") {
wx.showModal({
title: '提示',
content: '申请已提交',
})
} else {
wx.showModal({
title: '提示',
content: '申请失败',
})
}
}
})
}
})
承接毕业设计：微信小程序、ssm和树莓派硬件
有开发好的毕业设计可直接购买，价格便宜。
扫描下面二维码加微信（非诚勿扰）：
