有源码
微信小程序的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></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></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和树莓派硬件
有开发好的毕业设计可直接购买,价格便宜。
扫描下面二维码加微信(非诚勿扰):














