微信小程序picker选择器（下拉框）以及传值问题
参考文档： 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>js
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>js
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>js
// 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;
}点击完成的时候，将所有填写的值传给后端
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读