devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序之表单组件之picker-view(滚动选择器)+picker(滚动选择器)详解

作者：从前慢现在也慢 | 2024-02-28 14:18:24

赞

踩

picker-view

一.picker-view

 

picker-view 即 嵌入页面的滚动选择器。

 

1.属性

 

2.代码

 

2.1.WXSS代码

  1. .intro {
  2.   margin: 30px;
  3.   text-align: center;
  4. }

 

2.2.WXML代码

  1. <view>
  2.   <view>{{year}}年{{month}}月{{day}}日</view>
  3.   <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">
  4.     <picker-view-column>
  5.       <view wx:for="{{years}}" style="line-height: 50px">{{item}}年</view>
  6.     </picker-view-column>
  7.     <picker-view-column>
  8.       <view wx:for="{{months}}" style="line-height: 50px">{{item}}月</view>
  9.     </picker-view-column>
  10.     <picker-view-column>
  11.       <view wx:for="{{days}}" style="line-height: 50px">{{item}}日</view>
  12.     </picker-view-column>
  13.   </picker-view>
  14. </view>

 

2.3.JS代码

  1. const date = new Date()
  2. const years = []
  3. const months = []
  4. const days = []
  5.  
  6. for (let i = 1990; i <= date.getFullYear(); i++) {
  7.   years.push(i)
  8. }
  9.  
  10. for (let i = 1; i <= 12; i++) {
  11.   months.push(i)
  12. }
  13.  
  14. for (let i = 1; i <= 31; i++) {
  15.   days.push(i)
  16. }
  17.  
  18. Page({
  19.   data: {
  20.     years: years,
  21.     year: date.getFullYear(),
  22.     months: months,
  23.     month: 10,
  24.     days: days,
  25.     day: 9,
  26.     value: [9999, 9, 8],
  27.   },
  28.   bindChange: function (e) {
  29.     const val = e.detail.value
  30.     this.setData({
  31.       year: this.data.years[val[0]],
  32.       month: this.data.months[val[1]],
  33.       day: this.data.days[val[2]]
  34.     })
  35.   }
  36. })

 

3.效果

 

 

 

 

 

 

 

二.picker

 

picker 即 从底部弹起的滚动选择器，现支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。

 

1.普通选择器：mode = selector

 

 

2.多列选择器：mode = multiSelector

 

 

3.时间选择器：mode = time

 

 

 

4.日期选择器：mode = date

 

fields 有效值

 

 

5. 省市区选择器：mode = region

 

 

 

6.代码

 

6.1.WXSS代码

  1. @import "/lib/weui.wxss";
  2. .picker{
  3.     padding: 13px;
  4.     background-color: #FFFFFF;
  5. }

 

6.2.WXML代码

  1. <view class="section">
  2.   <view class="section__title">普通选择器</view>
  3.   <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
  4.     <view class="picker">
  5.       当前选择：{{array[index]}}
  6.     </view>
  7.   </picker>
  8. </view>
  9. <view class="section">
  10.   <view class="section__title">多列选择器</view>
  11.   <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
  12.     <view class="picker">
  13.       当前选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
  14.     </view>
  15.   </picker>
  16. </view>
  17. <view class="section">
  18.   <view class="section__title">时间选择器</view>
  19.   <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
  20.     <view class="picker">
  21.       当前选择: {{time}}
  22.     </view>
  23.   </picker>
  24. </view>
  25.  
  26. <view class="section">
  27.   <view class="section__title">日期选择器</view>
  28.   <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
  29.     <view class="picker">
  30.       当前选择: {{date}}
  31.     </view>
  32.   </picker>
  33. </view>
  34. <view class="section">
  35.   <view class="section__title">省市区选择器</view>
  36.   <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
  37.     <view class="picker">
  38.       当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}
  39.     </view>
  40.   </picker>
  41. </view>

 

6.3.JS代码

  1. Page({
  2.   data: {
  3.     array: ['美国', '中国', '巴西', '日本'],
  4.     objectArray: [
  5.       {
  6.         id: 0,
  7.         name: '美国'
  8.       },
  9.       {
  10.         id: 1,
  11.         name: '中国'
  12.       },
  13.       {
  14.         id: 2,
  15.         name: '巴西'
  16.       },
  17.       {
  18.         id: 3,
  19.         name: '日本'
  20.       }
  21.     ],
  22.     index: 0,
  23.     multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']],
  24.     objectMultiArray: [
  25.       [
  26.         {
  27.           id: 0,
  28.           name: '无脊柱动物'
  29.         },
  30.         {
  31.           id: 1,
  32.           name: '脊柱动物'
  33.         }
  34.       ], [
  35.         {
  36.           id: 0,
  37.           name: '扁性动物'
  38.         },
  39.         {
  40.           id: 1,
  41.           name: '线形动物'
  42.         },
  43.         {
  44.           id: 2,
  45.           name: '环节动物'
  46.         },
  47.         {
  48.           id: 3,
  49.           name: '软体动物'
  50.         },
  51.         {
  52.           id: 3,
  53.           name: '节肢动物'
  54.         }
  55.       ], [
  56.         {
  57.           id: 0,
  58.           name: '猪肉绦虫'
  59.         },
  60.         {
  61.           id: 1,
  62.           name: '吸血虫'
  63.         }
  64.       ]
  65.     ],
  66.     multiIndex: [0, 0, 0],
  67.     date: '2016-09-01',
  68.     time: '12:01',
  69.     region: ['广东省', '广州市', '海珠区'],
  70.     customItem: '全部'
  71.   },
  72.   bindPickerChange: function (e) {
  73.     console.log('picker发送选择改变，携带值为', e.detail.value)
  74.     this.setData({
  75.       index: e.detail.value
  76.     })
  77.   },
  78.   bindMultiPickerChange: function (e) {
  79.     console.log('picker发送选择改变，携带值为', e.detail.value)
  80.     this.setData({
  81.       multiIndex: e.detail.value
  82.     })
  83.   },
  84.   bindMultiPickerColumnChange: function (e) {
  85.     console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
  86.     var data = {
  87.       multiArray: this.data.multiArray,
  88.       multiIndex: this.data.multiIndex
  89.     };
  90.     data.multiIndex[e.detail.column] = e.detail.value;
  91.     switch (e.detail.column) {
  92.       case 0:
  93.         switch (data.multiIndex[0]) {
  94.           case 0:
  95.             data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'];
  96.             data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
  97.             break;
  98.           case 1:
  99.             data.multiArray[1] = ['鱼', '两栖动物', '爬行动物'];
  100.             data.multiArray[2] = ['鲫鱼', '带鱼'];
  101.             break;
  102.         }
  103.         data.multiIndex[1] = 0;
  104.         data.multiIndex[2] = 0;
  105.         break;
  106.       case 1:
  107.         switch (data.multiIndex[0]) {
  108.           case 0:
  109.             switch (data.multiIndex[1]) {
  110.               case 0:
  111.                 data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
  112.                 break;
  113.               case 1:
  114.                 data.multiArray[2] = ['蛔虫'];
  115.                 break;
  116.               case 2:
  117.                 data.multiArray[2] = ['蚂蚁', '蚂蟥'];
  118.                 break;
  119.               case 3:
  120.                 data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓'];
  121.                 break;
  122.               case 4:
  123.                 data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物'];
  124.                 break;
  125.             }
  126.             break;
  127.           case 1:
  128.             switch (data.multiIndex[1]) {
  129.               case 0:
  130.                 data.multiArray[2] = ['鲫鱼', '带鱼'];
  131.                 break;
  132.               case 1:
  133.                 data.multiArray[2] = ['青蛙', '娃娃鱼'];
  134.                 break;
  135.               case 2:
  136.                 data.multiArray[2] = ['蜥蜴', '龟', '壁虎'];
  137.                 break;
  138.             }
  139.             break;
  140.         }
  141.         data.multiIndex[2] = 0;
  142.         console.log(data.multiIndex);
  143.         break;
  144.     }
  145.     this.setData(data);
  146.   },
  147.   bindDateChange: function (e) {
  148.     console.log('picker发送选择改变，携带值为', e.detail.value)
  149.     this.setData({
  150.       date: e.detail.value
  151.     })
  152.   },
  153.   bindTimeChange: function (e) {
  154.     console.log('picker发送选择改变，携带值为', e.detail.value)
  155.     this.setData({
  156.       time: e.detail.value
  157.     })
  158.   },
  159.   bindRegionChange: function (e) {
  160.     console.log('picker发送选择改变，携带值为', e.detail.value)
  161.     this.setData({
  162.       region: e.detail.value
  163.     })
  164.   }
  165. })

 

 

 

7.效果

 

 

 

 

 

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/159424
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号