1.

在小程序的开发应用中，我们会经常用到picker组件。官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/picker.html下面是一个开发过程中的一个小小的事例。首先是效果图：

2.

HTML部分的代码：

formbindsubmit"teformSubmit"!--推广类型--viewclass'motionflexac'viewclass'motionText'推广类型/viewviewclass"sectionflexjac"pickerbindchange"expandTypeChange"value"{{expandTypeID}}"range"{{expandType}}"viewclass"picker"{{expandType[expandTypeID]}}/view/pickerimagesrc'/img/img/jiantou@2x.png'class'sectImg'/image/view!--此处的input框可以把滚动选择器的数据放进去，然后点击提交的时候把数据传给后台--inputstyle'display:none;'name"expandType"value"{{expandType[expandTypeID]}}"/input/view!--推广类型end--!--推广区域--viewclass'motionflexac'viewclass'motionText'推广区域/viewviewclass"sectionflexjac"pickermode"region"bindchange"expandAreaChange"value"{{region}}"custom-item"{{customItem}}"viewclass"picker"{{region[1]}}-{{region[2]}}/view/pickerimagesrc'/img/img/jiantou@2x.png'class'sectImg'/image/viewinputstyle'display:none;'name'expandArea'value'{{region[1]}}-{{region[2]}}'/input/view!--推广区域end--!--投放位置--viewclass'motionflexac'viewclass'motionText'投放位置/viewviewclass"sectionflexjac"pickerbindchange"putPlaceChange"value"{{putPlaceId}}"range"{{putPlace}}"viewclass"picker"{{putPlace[putPlaceId]}}/view/pickerimagesrc'/img/img/jiantou@2x.png'class'sectImg'/image/view!--此处的input框可以把滚动选择器的数据放进去，然后点击提交的时候把数据传给后台--inputstyle'display:none;'name"putPlace"value"{{putPlace[putPlaceId]}}"/input/view!--投放位置end--!--推广时间--viewclass'motionflexac'viewclass'motionText'推广时间/viewviewclass"sectionflexjac"pickerbindchange"expandTimeChange"value"{{expandTimeId}}"range"{{expandTime}}"viewclass"picker"{{expandTime[expandTimeId]}}/view/pickerimagesrc'/img/img/jiantou@2x.png'class'sectImg'/image/view!--此处的input框可以把滚动选择器的数据放进去，然后点击提交的时候把数据传给后台--inputstyle'display:none;'name"expandTime"value"{{expandTime[expandTimeId]}}"/input/view!--推广时间end--!--广告币--viewclass'motionflexac'viewclass'motionText'需支付广告币数量/viewinputname'num'value''placeholder'数量'/input/viewviewclass'proText'*支付成功后即表示您已同意（推广说明）/viewbuttonformType"submit"立即购买/button/form3.

我们要做成form表单，这个数据是要传送给后台。接下来是样式部分：

page{background:rgba(247,247,247,1);}.motion{margin:20rpxauto;width:702rpx;height:88rpx;background:rgba(255,255,255,1);border-radius:20rpx;justify-content:space-between;box-shadow:12rpx0px21rpxrgba(153,153,153,0.2);}.motionText{margin-left:25rpx;font-size:30rpx;color:rgba(51,51,51,1);}.picker{font-size:30rpx;margin-right:10rpx;color:rgba(253,130,48,1);}input{text-align:right;margin-right:25rpx;width:300rpx;font-size:30rpx;color:rgba(253,130,48,1);}.proText{width:702rpx;font-size:28rpx;margin:30rpxauto;color:#999;padding-left:62rpx;}.sectImg{width:14rpx;height:22rpx;margin-right:25rpx;}button{width:480rpx;height:80rpx;line-height:80rpx;font-size:32rpx;color:#fff;margin:100rpxauto;background:linear-gradient(80deg,rgba(247,97,59,1),rgba(253,130,48,1));border-radius:8rpx;}4.

还有一些是公共样式：

.img{width:100%;height:100%;}.br{border-radius:50%;}.indent{text-indent:2em;}.flex{display:flex;}.flexc{display:flex;flex-direction:column;}.flexw{display:flex;/*word-wrap:wrap;*/flex-wrap:wrap;}.flexjc{display:flex;justify-content:center;}.flexac{display:flex;align-items:center;}.flexjc{display:flex;justify-content:center;}.flexjac{display:flex;justify-content:center;align-items:center;}.text_hidden{overflow:hidden;text-overflow:ellipsis;white-space:wrap;}.f36{font-size:36rpx;}.f34{font-size:34rpx;}.f32{font-size:32rpx;}.f30{font-size:30rpx;}.f29{font-size:29rpx;}.f28{font-size:28rpx;}.f26{font-size:26rpx;}.f24{font-size:24rpx;}.f22{font-size:22rpx;}.f20{font-size:20rpx;}.text{text-align:center;}.line{width:100%;border-top:1rpxsolid#efefef;}.c6{color:#666;}.c9{color:#999;}.b10{border-radius:10rpx;}5.

最后是js部分：

//pages/mine/training/promotion/promotion.jsPage({/***页面的初始数据*/data:{expandType:["内涵段子","抖音","最右","火山小视频","爱奇艺","腾讯视频"],//推广类型expandTypeID:0,region:['浙江省','杭州市','江干区'],//推广区域,微信自带putPlace:["首页","尾页"],//推广位置putPlaceId:0,expandTime:["1-30天","31-60天","61-90天"],//推广时间expandTimeId:0,},//推广类型expandTypeChange:function(e){console.log('推广类型',e.detail.value)this.setData({expandTypeID:e.detail.value//把当前的触摸的索引给expandTypeID})},//地区选择expandAreaChange:function(e){console.log('地区选择',e.detail.value)this.setData({region:e.detail.value})},//投放位置putPlaceChange:function(e){console.log('投放位置',e.detail.value)this.setData({putPlaceId:e.detail.value})},//推广时间expandTimeChange:function(e){console.log('推广时间',e.detail.value)this.setData({expandTimeId:e.detail.value})},//表单提交时间teformSubmit(e){console.log('form',e)letvale.detail.valueconsole.log('form',val)},/***生命周期函数--监听页面加载*/onLoad:function(options){},/***生命周期函数--监听页面初次渲染完成*/onReady:function(){},/***生命周期函数--监听页面显示*/onShow:function(){},/***生命周期函数--监听页面隐藏*/onHide:function(){},/***生命周期函数--监听页面卸载*/onUnload:function(){},/***页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh:function(){},/***页面上拉触底事件的处理函数*/onReachBottom:function(){},/***用户点击右上角分享*/onShareAppMessage:function(){}})6.

最后当我们提交表单时就会实现把数据传输到后台：