微信小程序内 picker 组件的简便使用方法介绍

why 238 2024-08-23

这篇文章主要介绍了微信小程序picker组件简单用法,结合实例形式详细分析了picker组件的功能、使用方法与相关注意事项,需要的朋友可以参考下

本文实例讲述了微信小程序picker组件简单用法。分享给大家供大家参考，具体如下：

picker滚动选择器，现支持三种选择器，通过mode来区分，分别是普通选择器（mode=selector），时间选择器（mode=time），日期选择器（mode=date），默认是普通选择器。

具体功能说明如下：

普通选择器：mode=selector

属性名类型默认值说明
rangeArray[]mode为selector时，range有效
valueNumber0mode为selector时，是数字，表示选择了range中的第几个，从0开始。
bindchangeEventHandle
value改变时触发change事件，event.detail= { value:value}

时间选择器：mode=time

属性名类型默认值说明
valueString
表示选中的时间，格式为"hh:mm"
 startString
表示有效时间范围的开始，字符串格式为"hh:mm"
 endString
表示有效时间范围的结束，字符串格式为"hh:mm"
 bindchangeEventHandle
value改变时触发change事件，event.detail= { value:value}

日期选择器：mode=date

属性名类型默认值说明
valueString0表示选中的日期，格式为"yyyy-MM-dd"
startString
表示有效日期范围的开始，字符串格式为"yyyy-MM-dd"
endString
表示有效日期范围的结束，字符串格式为"yyyy-MM-dd"
fieldsStringday有效值year,month,day，表示选择器的粒度
bindchangeEventHandle
value改变时触发change事件，event.detail= { value:value}

示例代码如下：

picker.wxml：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<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="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>


picker.js：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

Page({

 data: {

 array: [&#39;美国&#39;, &#39;中国&#39;, &#39;巴西&#39;, &#39;日本&#39;],

 index: 0,

 date: &#39;2016-09-01&#39;,

 time: &#39;12:01&#39;

 },

 bindPickerChange: function(e) {

 console.log(&#39;picker发送选择改变，携带值为&#39;, e.detail.value)

 this.setData({

  index: e.detail.value

 })

 },

 bindDateChange: function(e) {

 this.setData({

  date: e.detail.value

 })

 },

 bindTimeChange: function(e) {

 this.setData({

  time: e.detail.value

 })

 }

})


简单样式布局picker.wxss：


1

2

3

4

5

6

7

8

9

10

.section {

 display: flex;

 flex-direction: column;

 padding: 20rpx 0rpx;

 color: #333;

}

.section__title{

 font-size: 40rpx;

 margin: 10rpx 0rpx;

}


运行效果：

以上就是本文的全部内容，希望对大家的学习有所帮助。


版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 方法 微信小程序 小程序 js
上一篇:微信小程序搭建与登录失败问题的解决途径
下一篇:微信小程序里 tabBar 底部导航的详细介绍
相关文章

 发表评论

暂时没有评论，来抢沙发吧~