微信小程序picker组件

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

HTML部分的代码：

<form bindsubmit="teformSubmit">
  <!-- 推广类型 -->
  <view class='motion flexac'>
    <view class='motionText'>推广类型</view>
    <view class="section flexjac">
      <picker bindchange="expandTypeChange" value="{{expandTypeID}}" range="{{expandType}}">
        <view class="picker">
          {{expandType[expandTypeID]}}
        </view>
      </picker>
      <image src='/img/img/jiantou@2x.png' class='sectImg'></image>
    </view>
    <!-- 此处的input框可以把滚动选择器的数据放进去，然后点击提交的时候把数据传给后台 -->
    <input style='display:none;' name="expandType" value="{{expandType[expandTypeID]}}"></input>
  </view>
  <!-- 推广类型end -->

  <!-- 推广区域 -->
  <view class='motion flexac'>
    <view class='motionText'>推广区域</view>
    <view class="section flexjac">
      <picker mode="region" bindchange="expandAreaChange" value="{{region}}" custom-item="{{customItem}}">
        <view class="picker">
          {{region[1]}}-{{region[2]}}
        </view>
      </picker>
      <image src='/img/img/jiantou@2x.png' class='sectImg'></image>
    </view>
    <input style='display:none;' name='expandArea' value='{{region[1]}}-{{region[2]}}'></input>
  </view>
  <!-- 推广区域end -->

   <!-- 投放位置 -->
  <view class='motion flexac'>
    <view class='motionText'>投放位置</view>
    <view class="section flexjac">
      <picker bindchange="putPlaceChange" value="{{putPlaceId}}" range="{{putPlace}}">
        <view class="picker">
          {{putPlace[putPlaceId]}}
        </view>
      </picker>
      <image src='/img/img/jiantou@2x.png' class='sectImg'></image>
    </view>
    <!-- 此处的input框可以把滚动选择器的数据放进去，然后点击提交的时候把数据传给后台 -->
    <input style='display:none;' name="putPlace" value="{{putPlace[putPlaceId]}}"></input>
  </view>
  <!-- 投放位置end -->

  <!-- 推广时间 -->
  <view class='motion flexac'>
    <view class='motionText'>推广时间</view>
    <view class="section flexjac">
      <picker bindchange="expandTimeChange" value="{{expandTimeId}}" range="{{expandTime}}">
        <view class="picker">
          {{expandTime[expandTimeId]}}
        </view>
      </picker>
      <image src='/img/img/jiantou@2x.png' class='sectImg'></image>
    </view>
    <!-- 此处的input框可以把滚动选择器的数据放进去，然后点击提交的时候把数据传给后台 -->
    <input style='display:none;' name="expandTime" value="{{expandTime[expandTimeId]}}"></input>
  </view>
  <!-- 推广时间end -->

  <!-- 广告币 -->
  <view class='motion flexac'>
    <view class='motionText'>需支付广告币数量</view>
    <input name='num' value='' placeholder='数量'></input>
  </view>
  <view class='proText'>*支付成功后即表示您已同意（推广说明）</view>
  <button formType="submit">立即购买</button>
</form>

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

page {
  background: rgba(247, 247, 247, 1);
}

.motion {
  margin: 20rpx auto;
  width: 702rpx;
  height: 88rpx;
  background: rgba(255, 255, 255, 1);
  border-radius: 20rpx;
  justify-content: space-between;
  box-shadow: 12rpx 0px 21rpx rgba(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: 30rpx auto;
  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: 100rpx auto;
  background: linear-gradient(80deg, rgba(247, 97, 59, 1), rgba(253, 130, 48, 1));
  border-radius: 8rpx;
}

还有一些是公共样式：

.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: 1rpx solid #efefef;
}

.c6 {
  color: #666;
}

.c9 {
  color: #999;
}

.b10{
  border-radius: 10rpx;
}

最后是js部分：

// pages/mine/training/promotion/promotion.js
Page({

  /**
   * 页面的初始数据
   */
  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)
    let val = e.detail.value
    console.log('form', val)
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

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