微信小程序picker选择器怎么实现

本篇内容主要讲解“微信小程序picker选择器怎么实现”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“微信小程序picker选择器怎么实现”吧!

picker选择器分为三种，普通选择器，时间选择器， 日期选择器 用mode属性区分，默认是普通选择器。

小程序picker选择器的实现方式

wxml

<view>普通选择器</view> <!--mode默认selector range数据源value选择的index bindchange事件监听--> <picker mode="selector" range="{{array}}" value="{{index}}" bindchange="listenerPickerSelected"> <text>{{array[index]}}</text> </picker> <view>时间选择器</view> <picker mode="time" value="{{time}}" start="06:00" end="24:00" bindchange="listenerTimePickerSelected"> <text>{{time}}</text> </picker>   <view>日期选择器</view> <picker mode="date" value="{{date}}" start="2016-09-26" end="2017-10-10" bindchange="listenerDatePickerSelected"> <text>{{date}}</text> </picker>

AI代码助手复制代码

js

Page({data:{// text:"这是一个页面"array: ['Android', 'IOS', 'ReactNativ', 'WeChat', 'Web'],index: 0,time: '08:30',date: '2016-09-26'},/*** 监听普通picker选择器*/listenerPickerSelected: function(e) {//改变index值，通过setData()方法重绘界面this.setData({index: e.detail.value});},/*** 监听时间picker选择器*/listenerTimePickerSelected: function(e) {//调用setData()重新绘制this.setData({time: e.detail.value,});},/*** 监听日期picker选择器*/listenerDatePickerSelected:function(e) {this.setDate({date: e.detail.value})},onLoad:function(options){// 页面初始化 options为页面跳转所带来的参数},onReady:function(){// 页面渲染完成},onShow:function(){// 页面显示},onHide:function(){// 页面隐藏},onUnload:function(){// 页面关闭}})

AI代码助手复制代码

到此，相信大家对“微信小程序picker选择器怎么实现”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>