微信小程序通过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

相关标签：微信小程序选择器 picker 数据获取

上一篇： php自定义大局常量与类常量

下一篇：遍历一个文件夹下所有文件和子文件夹的函数

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

微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析

微信小程序如何再次获取用户授权的方法

微信小程序授权登录解决方案的代码实例（含未通过授权解决方案）

微信小程序授权获取用户的openid和session_key【后端使用java语言编写】，我写的是get方式，目的是测试能否获取到微信服务器中的数据，后期我会写上post请求方式。

微信小程序购物车、父子组件传值及calc的注意事项总结

微信小程序API—获取定位的详解

微信小程序传值以及获取值方法的详解

微信小程序--获取用户地理位置名称(无须用户授权)的方法

python获取微信小程序手机号并绑定遇到的坑

微信小程序获取微信运动步数的实例代码

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

微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析

微信小程序如何再次获取用户授权的方法

微信小程序授权登录解决方案的代码实例（含未通过授权解决方案）

微信小程序授权 获取用户的openid和session_key【后端使用java语言编写】，我写的是get方式，目的是测试能否获取到微信服务器中的数据，后期我会写上post请求方式。

微信小程序购物车、父子组件传值及calc的注意事项总结

微信小程序API—获取定位的详解

微信小程序传值以及获取值方法的详解

微信小程序--获取用户地理位置名称(无须用户授权)的方法

python获取微信小程序手机号并绑定遇到的坑

微信小程序获取微信运动步数的实例代码

微信小程序授权获取用户的openid和session_key【后端使用java语言编写】，我写的是get方式，目的是测试能否获取到微信服务器中的数据，后期我会写上post请求方式。