微信小程序> 微信小程序通过picker获取选中的值

微信小程序通过picker获取选中的值

浏览量:2300 时间: 来源:小白XBIT

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

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎