欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-06-14 21:12:26
...

有源码
微信小程序的picker类型很多,时间获取比较好获取,直接e.detail.value就可以获取,但是像很多是类别的获取,这样就很难获取了,因为你的e.detail.value获取到的是数组的下标,这样你无法获取你想要的数据,这样就导致无法和后台交互,下面我用一个具体的实例来讲一picker获取数组的数据:做的就是车位预约申请:
微信小程序通过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 javaweb 硬件(树莓派)需要的加微信 价格优惠 v:18847414978