微信小程序picker选择器（下拉框）以及传值问题

比眉伴天荒 2022-10-12 01:25 22阅读 0赞

参考文档：  
https://developers.weixin.qq.com/miniprogram/dev/component/picker.html

wxml

<view class="section">
      <view class="section__title">普通选择器</view>
      <picker bindchange="bindPickerChange" value="{
       {index}}" range="{
       {array}}">
        <view class="picker">
          当前选择：{
       {array[index]}}
        </view>
      </picker>
    </view>
    <view class="section">
      <view class="section__title">多列选择器</view>
      <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{
       {multiIndex}}" range="{
       {multiArray}}">
        <view class="picker">
          当前选择：{
       {multiArray[0][multiIndex[0]]}}，{
       {multiArray[1][multiIndex[1]]}}，{
       {multiArray[2][multiIndex[2]]}}
        </view>
      </picker>
    </view>
    <view class="section">
      <view class="section__title">时间选择器</view>
      <picker mode="time" value="{
       {time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
        <view class="picker">
          当前选择: {
       {time}}
        </view>
      </picker>
    </view>
    
    <view class="section">
      <view class="section__title">日期选择器</view>
      <picker mode="date" value="{
       {date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
        <view class="picker">
          当前选择: {
       {date}}
        </view>
      </picker>
    </view>
    <view class="section">
      <view class="section__title">省市区选择器</view>
      <picker mode="region" bindchange="bindRegionChange" value="{
       {region}}" custom-item="{
       {customItem}}">
        <view class="picker">
          当前选择：{
       {region[0]}}，{
       {region[1]}}，{
       {region[2]}}
        </view>
      </picker>
    </view>

Page({
      data: {
        array: ['美国', '中国', '巴西', '日本'],
        objectArray: [
          {
            id: 0,
            name: '美国'
          },
          {
            id: 1,
            name: '中国'
          },
          {
            id: 2,
            name: '巴西'
          },
          {
            id: 3,
            name: '日本'
          }
        ],
        index: 0,
        multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']],
        objectMultiArray: [
          [
            {
              id: 0,
              name: '无脊柱动物'
            },
            {
              id: 1,
              name: '脊柱动物'
            }
          ], [
            {
              id: 0,
              name: '扁性动物'
            },
            {
              id: 1,
              name: '线形动物'
            },
            {
              id: 2,
              name: '环节动物'
            },
            {
              id: 3,
              name: '软体动物'
            },
            {
              id: 3,
              name: '节肢动物'
            }
          ], [
            {
              id: 0,
              name: '猪肉绦虫'
            },
            {
              id: 1,
              name: '吸血虫'
            }
          ]
        ],
        multiIndex: [0, 0, 0],
        date: '2016-09-01',
        time: '12:01',
        region: ['广东省', '广州市', '海珠区'],
        customItem: '全部'
      },
      bindPickerChange: function (e) {
        console.log('picker发送选择改变，携带值为', e.detail.value)
        this.setData({
          index: e.detail.value
        })
      },
      bindMultiPickerChange: function (e) {
        console.log('picker发送选择改变，携带值为', e.detail.value)
        this.setData({
          multiIndex: e.detail.value
        })
      },
      bindMultiPickerColumnChange: function (e) {
        console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
        var data = {
          multiArray: this.data.multiArray,
          multiIndex: this.data.multiIndex
        };
        data.multiIndex[e.detail.column] = e.detail.value;
        switch (e.detail.column) {
          case 0:
            switch (data.multiIndex[0]) {
              case 0:
                data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'];
                data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
                break;
              case 1:
                data.multiArray[1] = ['鱼', '两栖动物', '爬行动物'];
                data.multiArray[2] = ['鲫鱼', '带鱼'];
                break;
            }
            data.multiIndex[1] = 0;
            data.multiIndex[2] = 0;
            break;
          case 1:
            switch (data.multiIndex[0]) {
              case 0:
                switch (data.multiIndex[1]) {
                  case 0:
                    data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
                    break;
                  case 1:
                    data.multiArray[2] = ['蛔虫'];
                    break;
                  case 2:
                    data.multiArray[2] = ['蚂蚁', '蚂蟥'];
                    break;
                  case 3:
                    data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓'];
                    break;
                  case 4:
                    data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物'];
                    break;
                }
                break;
              case 1:
                switch (data.multiIndex[1]) {
                  case 0:
                    data.multiArray[2] = ['鲫鱼', '带鱼'];
                    break;
                  case 1:
                    data.multiArray[2] = ['青蛙', '娃娃鱼'];
                    break;
                  case 2:
                    data.multiArray[2] = ['蜥蜴', '龟', '壁虎'];
                    break;
                }
                break;
            }
            data.multiIndex[2] = 0;
            break;
        }
        console.log(data.multiIndex);
        this.setData(data);
      },
      bindDateChange: function (e) {
        console.log('picker发送选择改变，携带值为', e.detail.value)
        this.setData({
          date: e.detail.value
        })
      },
      bindTimeChange: function (e) {
        console.log('picker发送选择改变，携带值为', e.detail.value)
        this.setData({
          time: e.detail.value
        })
      },
      bindRegionChange: function (e) {
        console.log('picker发送选择改变，携带值为', e.detail.value)
        this.setData({
          region: e.detail.value
        })
      }
    })

效果  
普通选择器;  
![4fdc19677e27e4b5bf6de366348348fe.png][]

多列选择器  
![db30aa8ebe8d75d1cd6f1e53ed335e1d.png][]  
时分秒（时间选择器）  
![1bd0c607ece983671c1e2c37c97d3386.png][]

年月日 日期选择器  
![a936ccf07fc4cff6c2b6187b4787a6db.png][]

省市选择器  
![6e1bca692c2a8f34c159116a0f84a0ad.png][]

传值问题：  
微信小程序picker选择器传值  
以最简单的普通选择器为例  
wxml

<view class="cu-form-group margin-top">
    		<view class="title d-flex">普通选择器
    		</view>
    	 <picker  class="w-100 h-100 borderBottom flex-1 d-flex jc-start ai-center" style="height:100rpx;font-size: 30rpx;color: #555;" bindchange="bindPickerChange" value="{
       {index}}" range="{
       {array}}">
        <view class="picker">
          当前选择：{
       {array[currentChoose]}}
        </view>
      </picker>
    	</view>

Page({
      data: {
        array: ['工作', '放假', '加班', '调休'],
        currentChoose: 0
      },
      bindPickerChange: function (e) {
        console.log('picker发送选择改变，携带值为', e.detail.value)
        this.setData({
          currentChoose: e.detail.value
        })
      },
    
    })

wxss

.d-flex {
    display: flex;
    }
    .cu-form-group .title {
    text-align: justify;
    padding-right: 30rpx;
    font-size: 30rpx;
    position: relative;
    height: 60rpx;
    line-height: 60rpx;
    
    }
    .cu-form-group {
    	background-color: var(--white);
    	padding: 1rpx 30rpx;
    	display: flex;
    	align-items: center;
    	min-height: 100rpx;
    	justify-content: space-between;
    }
    .borderBottom {
      border-bottom: 1rpx solid #eee;
    }
    
    .ai-center {
    align-items: center;
    
    }
    .jc-start {
    justify-content: flex-start;
    
    }
    .flex-1 {
    flex: 1;
    
    }
    .cu-form-group input {
    	flex: 1;
    	font-size: 30rpx;
    	color: #555;
    	padding-right: 20rpx;
    }

array: \[‘工作’, ‘放假’, ‘加班’, ‘调休’\],对应的int值分别是0,1,2,3  
![61d38b397b7ba06470bd43e3a43496b2.png][]

在实际使用中  
例子  
微信小程序提交form表单内容  
wxml

<form catchsubmit="confirmPublish">
      <view class="cu-form-group margin-top">
        <view class="title d-flex">
          姓名
        </view>
        <view class="w-100 h-100 borderBottom flex-1 d-flex jc-start ai-center" style="height:100rpx;">
          <input maxlength="15" placeholder="请输入姓名" value="{
       {name}}" data-name="name" bindblur="setInput"></input>
        </view>
      </view>
      <view class="cu-form-group margin-top">
        <view class="title d-flex">性别
        </view>
        <picker class="w-100 h-100 borderBottom flex-1 d-flex jc-start ai-center" style="height:100rpx;font-size: 30rpx;color: #555;" bindchange="bindPickerChange" value="{
       {index}}" range="{
       {array}}">
          <view class="picker">
            {
       {array[sex]}}
          </view>
        </picker>
      </view>
      <view class="cu-form-group margin-top">
        <view class="title d-flex">
          手机号
        </view>
        <view class="w-100 h-100 borderBottom flex-1 d-flex jc-start ai-center" style="height:100rpx;">
          <input maxlength="15" placeholder="请输入姓名" value="{
       {phone}}" data-name="phone" bindblur="setInput"></input>
        </view>
      </view>
      <view class="cu-form-group margin-top">
        <view class="title d-flex">
          证件号
        </view>
        <view class="w-100 h-100 borderBottom flex-1 d-flex jc-start ai-center" style="height:100rpx;">
          <input maxlength="15" placeholder="请输入姓名" value="{
       {idNumber}}" data-name="idNumber" bindblur="setInput"></input>
        </view>
      </view>
      <view class="cu-form-group margin-top">
        <view class="title d-flex">日期选择器</view>
    
        <view class="picker" class="w-100 h-100 borderBottom flex-1 d-flex jc-start ai-center" style="height:100rpx;font-size: 30rpx;color: #555;" bind:tap="openPicker">
          {
       {currentChoose}}
        </view>
    
      </view>
    
    
      <van-action-sheet show="{
       { show }}" bind:close="onClose" bind:getuserinfo="onGetUserInfo">
        <van-datetime-picker type="datetime" value="{
       { currentDate }}" min-date="{
       { minDate }}" max-date="{
       { maxDate }}" bind:cancel="onCancel" bind:confirm="onConfirm" bind:change="onChange" />
      </van-action-sheet>
    
    
      <view class="cu-form-group margin-top">
        <view class="title d-flex">来访事由
        </view>
        <picker class="w-100 h-100 borderBottom flex-1 d-flex jc-start ai-center" style="height:100rpx;font-size: 30rpx;color: #555;" bindchange="bindPickerChangeCause" value="{
       {index1}}" range="{
       {visitCausearray}}">
          <view class="picker">
            {
       {visitCausearray[visitCause]}}
          </view>
        </picker>
      </view>
      <view class="cu-form-group margin-top">
        <view class="title d-flex">
          来访公司
        </view>
        <view class="w-100 h-100 borderBottom flex-1 d-flex jc-start ai-center" style="height:100rpx;">
          <input maxlength="15" placeholder="请输入姓名" value="{
       {visitCompany}}" data-name="visitCompany" bindblur="setInput"></input>
        </view>
      </view>
      <view class="cu-form-group margin-top">
        <view class="title d-flex">
          被访姓名
        </view>
        <view class="w-100 h-100 borderBottom flex-1 d-flex jc-start ai-center" style="height:100rpx;">
          <input maxlength="15" placeholder="请输入姓名" value="{
       {interviewee}}" data-name="interviewee" bindblur="setInput"></input>
        </view>
      </view>
    
      <view class="cu-form-group margin-top">
        <view class="title d-flex">被访部门
        </view>
        <picker class="w-100 h-100 borderBottom flex-1 d-flex jc-start ai-center" style="height:100rpx;font-size: 30rpx;color: #555;" bindchange="bindPickerOrgan" value="{
       {index2}}" range="{
       {organarray}}">
          <view class="picker">
            {
       {organarray[visitOrganId]}}
          </view>
        </picker>
      </view>
    
      <button class='btn1' bindtap="bindViewTapsuccess" form-type="submit">完成</button>
    
    </form>

// pages/addsign/addsign.js
    var util = require('../../utils/util.js');
    const app = getApp()
    Page({
      /**
       * 页面的初始数据
       */
      data: {
        globalid: [],
        array: ['男', '女'],
        sex: 0,
        visitCausearray: ['面试', '开会', '拜访顾客', '项目实施', '其他'],
        visitCause: 0,
        organarray: ['生产部', '运营部', '营销部'],
        visitOrganId: 0,
        date: '2021-06-01',
        name: '',
        phone: '',
        idNumber: '',
        subscribeTime: '',
        visitCompany: '',
        interviewee: '',
        visitOrgan: '',
        //日期选择器
        minHour: 0,
        maxHour: 24,
        minDate: new Date(1990, 1, 1).getTime(),
        maxDate: new Date(2099, 12, 31).getTime(),
        currentDate: new Date().getTime(),
        show: false,
        currentChoose: ''
      },
      //日期选择器的处理
      openPicker() {
        this.setData({
          show: true
        })
      },
      onConfirm(e) {
        this.setData({
          show: false,
          currentChoose: this.formatDate(new Date(e.detail))
        })
      },
      onClose() {
        this.setData({
          show: false
        })
      },
      onCancel() {
        this.setData({
          show: false
        })
      },
      formatDate(date) {
        let taskStartTime
        if (date.getMonth() < 9) {
          taskStartTime = date.getFullYear() + "-0" + (date.getMonth() + 1) + "-"
        } else {
          taskStartTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-"
        }
        if (date.getDate() < 10) {
          taskStartTime += "0" + date.getDate()
        } else {
          taskStartTime += date.getDate()
        }
        taskStartTime += " " + date.getHours() + ":" + date.getMinutes()
        this.setData({
          taskStartTime: taskStartTime,
        })
        return taskStartTime;
      },
    
      //男女
      bindPickerChange: function(e) {
        console.log('picker发送选择改变，携带值为', e.detail.value)
        this.setData({
          sex: e.detail.value
        })
      },
    
      //来访事由
      bindPickerChangeCause: function(e) {
        console.log('picker发送选择改变，携带值为', e.detail.value)
        this.setData({
          visitCause: e.detail.value
        })
      },
      //部门
      bindPickerOrgan: function(e) {
        console.log('picker发送选择改变，携带值为', e.detail.value)
        this.setData({
          visitOrganId: e.detail.value
        })
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function(options) {
        // 调用函数时，传入new Date()参数，返回值是日期和时间
        var time = util.formatTime(new Date());
        this.setData({
          currentChoose: time
        });
      },
      setInput: function(e) {
        const {
          name
        } = e.target.dataset
        this.data[name] = e.detail.value
    
        this.setData(this.data)
      },
      confirmPublish: function() {
    
        var that = this
    
        const data = {}
        data.name = this.data.name
        data.sex = this.data.sex
        data.phone = this.data.phone
        data.idNumber = this.data.idNumber
        data.subscribeTime = this.data.currentChoose
        data.visitCause = this.data.visitCause
        data.visitCompany = this.data.visitCompany
        data.interviewee = this.data.interviewee
        data.visitOrgan = this.data.visitOrgan
    
        data.visitOrganId = this.data.visitOrganId
        console.log(JSON.stringify(data))
    
    
        wx.request({
          url: 'http://192.xxx.4.1xx:8093/cs-applet/subscribe/addCallerSubscribe',
          method: 'POST',
          data: data,
          header: {
            'content-type': 'application/json',
          },
          success: function(res) {
    
          },
          fail: function(error) {
            wx.showToast({
              title: error.message || '保存失败'
            })
            console.log(error)
          }
        })
      },
    })

css

/* 确认发布的按钮 */
    
    .btn1 {
      width: 90%;
      margin-top: 70rpx;
      margin-bottom: 70rpx;
      background-color: #09bb07;
      color: white;
      font-size: 33rpx;
      border-radius: 13rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
    }
    
    .d-flex {
      display: flex;
    }
    
    .cu-form-group .title {
      text-align: justify;
      padding-right: 30rpx;
      font-size: 30rpx;
      position: relative;
      height: 60rpx;
      line-height: 60rpx;
    }
    
    .cu-form-group {
      background-color: var(--white);
      padding: 1rpx 30rpx;
      display: flex;
      align-items: center;
      min-height: 100rpx;
      justify-content: space-between;
    }
    
    .borderBottom {
      border-bottom: 1rpx solid #eee;
    }
    
    .ai-center {
      align-items: center;
    }
    
    .jc-start {
      justify-content: flex-start;
    }
    
    .flex-1 {
      flex: 1;
    }
    
    .cu-form-group input {
      flex: 1;
      font-size: 30rpx;
      color: #555;
      padding-right: 20rpx;
    }

点击完成的时候，将所有填写的值传给后端

![9b87098efef933990c1354f6963f8e70.png][]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]

[4fdc19677e27e4b5bf6de366348348fe.png]: /images/20221005/188500cec86647738f1bc18b053a674c.png
[db30aa8ebe8d75d1cd6f1e53ed335e1d.png]: /images/20221005/0e6903d687c644d59cef72b2d4d5bda4.png
[1bd0c607ece983671c1e2c37c97d3386.png]: /images/20221005/bbc7ccdf7ccd4b3da9cacd9248200658.png
[a936ccf07fc4cff6c2b6187b4787a6db.png]: /images/20221005/b1b5e8aa32d4472c8b879be998bbd69d.png
[6e1bca692c2a8f34c159116a0f84a0ad.png]: /images/20221005/b678d389b0d54c389dbbcc31e68cae1a.png
[61d38b397b7ba06470bd43e3a43496b2.png]: /images/20221005/1a817015d0b64ec0aa21f464db35b14a.png
[9b87098efef933990c1354f6963f8e70.png]: /images/20221005/14ca2ce763464c0d928bc1040ae67b06.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]: /images/20221005/55560e4454434142933e31eb4eaf0bab.png