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

2022-10-30 21:22:02

参考文档：
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
    })
  }
})

效果
普通选择器;

多列选择器

时分秒（时间选择器）

年月日日期选择器

省市选择器

传值问题：
微信小程序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

在实际使用中
例子
微信小程序提交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
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onl oad: 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;
}

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

码农公寓

相关文章