微信小程序利用picker实现时间选择器
这是一个利用微信小程序实现时间选择器的例子
希望大家可以喜欢
// pages/map/driverServer/driverServer.js
const handler = require("../../../utils/function.js");
Page({
/**
* 页面的初始数据
*/
data: {
controls: [{
id: 1,
iconPath: '../../../images/user/icon-22.png',
position: {
left: 10,
top: 10,
width: 50,
height: 50
},
clickable: true
}, {
id: 2,
iconPath: '../../../images/user/icon-30.png',
position: {
top: 240,
left: 10,
width: 50,
height: 50
},
clickable: true
},
],//人物图片定位
drivers:[
{id:"001",title:"1名司机"},
{ id: "002", title: "2名司机" },
{ id: "003", title: "3名司机" },
{ id: "004", title: "4名司机" },
{ id: "005", title: "5名司机" },
{ id: "006", title: "6名司机" },
{ id: "007", title: "7名司机" },
{ id: "008", title: "8名司机" }
],//司机数量
startAddress: null,//开始位置
endAddress:null,//结束位置
longitude:null,
latitude: null,
orderOrMore:true,//预约和司机数量显示
driverCount:-1,
pageRight:0,
myShow:true,//显示my的页面
zuoyou: "icon-zuoyou",//my
avatar: "../../../images/user/icon-07.png",
buttonText: "登录",
username: "未登录",
orderGoing:false,
showTimeContainer:false,
date: ["今天", "明天", "后台"],//时间选择器
hours: [],
minute: [],
homeHandlerShow:true
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
regionchange(e) {
console.log("regionchange", e.type)
},
markertap(e) {
console.log("markertap", e.markerId)
},
// 地图图片点击事件
controltap(e) {
console.log("map controltap", e.controlId)
if (e.controlId === 1) {
this.openMyPageHandler();
} else {
const addresses= handler.getLatLntHandler((res)=>{
// console.log("一键定位",res);
this.setData({
startAddress: res.startAddress,//开始位置
})
});
}
},
// openMyPageHandler 打开我的页面
openMyPageHandler:function(){
const { pageRight, myShow}=this.data;
// console.log("openMyPageHandler",pageRight, myShow);
if (myShow){
this.setData({
pageRight: 620,
myShow: !myShow,
controls: [{
id: 1,
iconPath: '../../../images/user/icon-33.png',
position: {
top: 144,
left: 10,
width: 41,
height: 41
},
clickable: true
}] });
}else{
this.setData({
pageRight: 0, myShow: !myShow, controls: [{
id: 1,
iconPath: '../../../images/user/icon-22.png',
position: {
left: 10,
top: 10,
width: 50,
height: 50
},
clickable: true
}, {
id: 2,
iconPath: '../../../images/user/icon-30.png',
position: {
top: 240,
left: 10,
width: 50,
height: 50
},
clickable: true
},
],});
}
},
// callPhoneHandler 帮朋友叫车功能
callPhoneHandler:function(){
wx.navigateTo({ url:"../../order/helpFriendDownloadOrder/helpFriendDownloadOrder"})
},
// getMoreDriverHandler 需要更多为司机功能
getMoreDriverHandler:function(){
this.setData({ orderOrMore: !this.data.orderOrMore});
},
// bindChange 选择司机的数量
bindChange:function(e){
console.log(e.detail.value[0]);
this.setData({ driverCount: e.detail.value[0]+1});
},
// getDriverCountHandler 获取司机的数量
getDriverCountHandler:function(){
this.setData({ orderOrMore: !this.data.orderOrMore });
},
// callServerHandler 一键呼叫事件
callServerHandler:function(){
if (this.data.buttonText==="登录"){
wx.showToast({
title: '请先登录',
icon: "none"
})
this.openMyPageHandler();
}else if (this.data.endAddress===null){
wx.showToast({
title: '请输入目的地',
icon:"none"
})
}else{
const order=wx.getStorageSync("order");
const current_order = {
id: "00"+(order.length+1),
time: new Date(),
startAddress: this.data.startAddress,
endAddress: this.data.endAddress,
status: 0,
driver_count: this.data.driverCount === -1 ? 1 : this.data.driverCount,
user: wx.getStorageSync("relative_people") === "" ? wx.getStorageSync("user") : wx.getStorageSync("relative_people"),
};
wx.setStorageSync("current_order", current_order)
wx.navigateTo({
url: '../orderAndDriverGoing/orderAndDriverGoing',
})
}
},
// orderGoingHandler 订单进行中事件
orderGoingHandler:function(){
wx.showToast({
title: '您还没有进行中的订单',
icon: "none"
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
this.setData({ startAddress: wx.getStorageSync("startAddress") });
if(wx.getStorageSync("endAddress")!==""){
this.setData({ endAddress: wx.getStorageSync("endAddress") });
}
if (wx.getStorageSync("userMessage") !== ""){
this.setData({
avatar: wx.getStorageSync("userMessage").avatar,
username: wx.getStorageSync("userMessage").username,
buttonText: wx.getStorageSync("userMessage").buttonText });
}
},
// 用户信息事件
/**loginHandler用户登录页面 */
loginHandler: function (e) {
if ( this.data.buttonText === "登录") {
handler.loginHandler((res)=>{
// console.log("用户信息事件",res);
this.setData({ res,} );
const that=this;
wx.showModal({
title: '获取手机号码',
content: '我们需要获取你的电话号码，一边与和你保持实时的联系，防止你的订单丢失',
success:function(res){
if(res.confirm){
handler.intoPageHandler("../../user/getPhone/getPhone");
}
},
fail:function(){
wx.showToast({
title: '登录失败',
icon:"none"
})
}
})
})
}else{
this.setData({ avatar: "../../../images/user/icon-07.png", username: "未登录", buttonText: "登录" });
}
},
// intoPageHandler 页面跳转
intoPageHandler: function (e) {
handler.intoPageHandler(e.currentTarget.dataset.skip);
},
// relstiveServerHandler 联系客服功能
relstiveServerHandler:function(){
handler.callPhoneHandler(wx.getStorageSync("serverPhone"));
},
//时间样式开始
selectTimeShowTimeHandler:function(){
this.setData({ showTimeContainer: true, homeHandlerShow:false});
this.selectTimeHandler(0, 0, 0);
},
// getTimeHandlerCancle 预约时间取消样式
getTimeHandlerCancle:function(){
this.setData({ showTimeContainer: false, homeHandlerShow: true });
},
// getTimeHandlerOk 预约时间确定样式
getTimeHandlerOk:function(){
wx.getS
this.setData({ showTimeContainer: false, homeHandlerShow: true });
},
// 绑定时间定时器
bindTimeChange: function (e) {
console.log(e.detail.value);
// 今天样式
if (e.detail.value[0] === 0 && e.detail.value[1] === 0) {
this.selectTimeHandler(0, 0);
} else if (e.detail.value[0] === 0 && e.detail.value[1] !== 0) {
this.selectTimeHandler(0, e.detail.value[1]);
}
// 明天和后台样式
else if (e.detail.value[0] !== 0) {
this.selectTimeHandler(e.detail.value[0], e.detail.value[1], 0);
}
},
// 选择时间函数
selectTimeHandler: function (dateParams, hoursParams, minutesParams) {
const { hours, minute } = this.data;
console.log(dateParams);
const data = new Date();
const hour = data.getHours();
// 今天样式
hours.length = 0;
minute.length = 0;
console.log(dateParams, hoursParams, minutesParams);
if (dateParams === 0 && hoursParams === 0) {
hours.push("现在");
for (var i = hour + 1; i < 24; i++) {
hours.push(i + "点");
}
this.setData({ hours, minute });
} else if (dateParams === 0 && hoursParams !== 0) {
hours.push("现在");
for (var i = hour + 1; i < 24; i++) {
hours.push(i+"点");
}
for (var i = 0; i < 60; i += 10) {
minute.push(i);
}
this.setData({ hours, minute });
} else if (dateParams !== 0) {
for (var i = 0; i < 24; i++) {
hours.push(i + "点");
}
for (var i = 0; i < 60; i += 10) {
minute.push(i);
}
this.setData({ hours, minute });
}
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
/* pages/map/driverServer/driverServer.wxss */
/*driverServer */
.driverServerContainer{
display: flex;
}
.myContainer{
width:620rpx;
}
.driverServer{
width:700rpx;
height:500rpx;
background: #fff;
margin-top:700rpx;
margin-left:25rpx;
}
.driverTitle{
width:100%;
height:100rpx;
border-bottom: 2rpx solid #ddd;
font-size:28rpx;
text-align:center;
display: flex;
justify-content: center;
line-height:100rpx;
}
.driverTitle image{
width:32rpx;
height:32rpx;
margin-top:33rpx;
margin-right:10rpx;
}
.startAddress{
font-size:32rpx;
height:100rpx;
display:flex;
line-height:100rpx;
border-bottom:2rpx solid #ddd;
}
.startAddress icon{
width:20rpx;
height:20rpx;
background:#00a0e9;
border-radius: 50%;
margin-left:40rpx;
margin-top:40rpx;
margin-right:20rpx;
display:block;
}
.startAddress input{
width:100%;
height:100rpx;
line-height:100rpx;
display: inline-block;
}
.goAddress{
font-size:32rpx;
height:100rpx;
display:flex;
justify-content: space-between;
line-height:100rpx;
border-bottom:2rpx solid #ddd;
}
.iconAndGoAddress{
display: flex;
width:80%;
}
.goAddress icon{
width:20rpx;
height:20rpx;
background:#e9a400;
border-radius: 50%;
margin-left:40rpx;
margin-top:40rpx;
margin-right:20rpx;
display:block;
}
.goAddress input{
width:100%;
height:100rpx;
line-height:100rpx;
display: inline-block;
}
.serverImage{
width:25rpx;
height:40rpx;
margin-right:40rpx;
margin-top:10rpx;
}
.serverImage image{
width:25rpx;
height:40rpx;
}
.helpAndMoreDriver{
text-align: center;
width:100%;
display: flex;
font-size:26rpx;
padding-top:20rpx;
}
.helpAndMoreDriver image{
width:26rpx;
height:20rpx;
margin-right:10rpx;
}
.help{
width:50%;
height:100rpx；
}
/*privenceRelative */
.privenceRelative{
width:100%;
height:500rpx;
background: #fff;
position: absolute;
overflow: hidden;
top:700rpx;
z-index:100;
}
.title{
display: flex;
justify-content: space-between;
font-size:26rpx;
color:#666666;
height: 100rpx;
line-height:100rpx;
border-bottom:2rpx solid #ddd;
padding:0rpx 40rpx;
}
.droverCountText{
font-size:32rpx;
text-align: center;
height:90rpx;
line-height:90rpx;
}
.driverChecked{
height:90rpx;
line-height:90rpx;
font-size:32rpx;
}
/* appointmentTimeContainer */
.appointmentTimeContainer{
width:100%;
height:500rpx;
background: #fff;
position: absolute;
overflow: hidden;
top:700rpx;
z-index:100;
}
/* getPhoneAndYanZhengMa */
.getPhoneAndYanZhengMa{
width:100%;
background: #f1f2f4;
height: 100%;
position: fixed;
top:0rpx;
left:0rpx;
z-index:1000;
}
.getPhoneAndYanZhengMaContainer{
position: absolute;
width:100%;
height: 500rpx;
top:250rpx;
}
.PYtitle{
width:100%;
text-align: center;
font-size:40rpx;
color:#333;
margin-bottom:50rpx;
}
.getPhone{
width:100%;
background: #fff;
height:100rpx;
line-height: 100rpx;
font-size:30rpx;
}
.getPhone input{
width:700rpx;
margin:0 auto;
height: 100rpx;
line-height: 100rpx;
}
.getYanZhengMa{
width:100%;
background: #fff;
height:100rpx;
line-height: 100rpx;
font-size:30rpx;
display: flex;
justify-content: space-between;
}
.getYanZhengMa input{
width:530rpx;
margin-left:25rpx;
height: 100rpx;
line-height: 100rpx;
}
.getYanZhengMa button{
width:160rpx;
height: 60rpx;
border-radius: 0;
border:none;
font-size:26rpx;
line-height: 60rpx;
text-align: center;
padding:0;
margin-right: 25rpx;
margin-top:25rpx;
background: #ddd;
color:#fff;
}
.getYanZhengMa button::after{
border:none;
}
.getPhoneAndYanZhengMaButton button{
width:700rpx;
margin:50rpx auto;
background: #ddd;
font-size:36rpx;
height: 90rpx;
line-height: 90rpx;
border:none;
border-radius: 7rpx;
color:#fff;
text-align: center;
}.getPhoneAndYanZhengMaButton button::after{
border:none;
}
.borderTop{
border-top:2rpx solid #ddd;
}
<!--pages/map/driverServer/driverServer.wxml-->
<!--dirver container -->
<view class='driverServerContainer'>
<view class='myContainer' hidden='{{myShow}}'>
<view class='myContainer'>
<view class='myLeft'>
<view class='avatarAndLogin'>
<image src="{{avatar}}"></image>
<view>{{username}}</view>
</view>
<view class='myList'>
<view class='myItem ' data-skip="../../userOrder/allOrder/allOrder" bindtap='intoPageHandler'>
<view class='iconfont icon-wenben'></view>
<view>全部订单</view>
</view>
<view class='myItem' data-skip="../orderGoing/orderGoing" bindtap='orderGoingHandler'>
<view class='iconfont icon-biao'></view>
<view>进行中</view>
<view class='showCount' style='display:{{orderGoing?"inline-block":"none"}}'>1</view>
</view>
<view class='myItem' data-skip="../../coupon/coupon" bindtap='intoPageHandler'>
<view class='iconfont icon-youhuiquan'></view>
<view>优惠券</view>
</view>
<view class='myItem' bindtap='relstiveServerHandler'>
<view class='iconfont icon-weibiaoti'></view>
<view>联系客服</view>
</view>
</view>
<view class='loginOut'>
<button class='loginOutButton' open-type="getUserInfo" bindgetuserinfo="loginHandler">{{buttonText}}</button>
</view>
</view>
</view>
</view>
<view class='driverContainer'>
<map id="map" longitude="{{startAddress.location.lng}}" latitude="{{startAddress.location.lat}}" scale="15" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 750rpx; height: 700rpx;position:absolute">
</map>
<view class="driverServer" style='display:{{homeHandlerShow?"block":"none"}}'>
<view class='driverTitle' bindtap='selectTimeShowTimeHandler'>
<image src="../../../images/user/icon-25.png"></image>
<text>预约时间</text>
</view>
<view class='startAddress'>
<icon></icon>
<input placeholder='所在位置（自动生成）' value="{{startAddress.title}}" data-skip="../searchAddress/searchAddress?addressType=startAddress" bindfocus='intoPageHandler'></input>
</view>
<view class='goAddress'>
<view class='iconAndGoAddress'>
<icon></icon>
<input placeholder='请输入目的地' data-skip="../searchAddress/searchAddress?addressType=endAddress" bindfocus='intoPageHandler' value="{{endAddress.title}}"></input>
</view>
<view class='serverImage'>
<image src='../../../images/user/icon-19.png'></image>
</view>
</view>
<view class='helpAndMoreDriver'>
<view class='help' data-skip="../../userOrder/helpFriendDownloadOrder/helpFriendDownloadOrder" bindtap='intoPageHandler'>
<image src="../../../images/user/icon-24.png"></image>
<text>帮朋友叫车</text>
</view>
<view class='moreDriver' bindtap='getMoreDriverHandler'>
<view class='more'>
<image src="../../../images/user/icon-24.png"></image>
<text>需要多位司机</text></view>
</view>
</view>
<view class='scjSubmitButton'>
<button class='scjSubmit' bindtap='callServerHandler'>一键呼叫</button>
</view>
</view>
<!-- 选择司机数量 -->
<view class='privenceRelative' style='display:{{!orderOrMore?"block":"none"}}'>
<view class='title'>
<view bindtap='getMoreDriverHandler'>取消</view>
<view>请选择司机数量</view>
<view bindtap='getDriverCountHandler'>确定</view>
</view>
<view class='context'>
<picker-view indicator-class="driverChecked" style="width: 100%; height: 400rpx;" bindchange="bindChange">
<picker-view-column>
<view wx:for="{{drivers}}" wx:key='this' class='droverCountText'>
{{item.title}}
</view>
</picker-view-column>
</picker-view>
</view>
</view>
<!-- 选择预约时间 -->
<view class='appointmentTimeContainer' style='display:{{showTimeContainer?"block":"none"}}'>
<view class='title'>
<view bindtap='getTimeHandlerCancle'>取消</view>
<view>请选择预约时间</view>
<view bindtap='getTimeHandlerOk'>确定</view>
</view>
<view class='context'>
<picker-view indicator-class="driverChecked" style="width: 100%; height: 400rpx;" bindchange="bindTimeChange">
<picker-view-column >
<view wx:for="{{date}}" wx:key='this' class='droverCountText'>
{{item}}
</view>
</picker-view-column>
<picker-view-column >
<view wx:for="{{hours}}" wx:key='this' class='droverCountText'>
{{item}}
</view>
</picker-view-column>
<picker-view-column >
<view wx:for="{{minute}}" wx:key='this' class='droverCountText'>
{{item}}分
</view>
</picker-view-column>
</picker-view>
</view>
</view>
</view>
</view>