您现在的位置是:网站首页> 编程资料编程资料

微信小程序实现时间选择_javascript技巧_

2023-05-24 330人已围观

简介 微信小程序实现时间选择_javascript技巧_

本文实例为大家分享了微信小程序实现时间选择的具体代码,供大家参考,具体内容如下 

xml: 

                    {{dateValue}}                                      {{dateValue}}                  

css: 

.day-check {   width: 100%;   height: 30px;   display: flex;   flex-direction: row;   justify-content: center;   border-bottom: 1px solid rgb(212, 212, 212);   }   .picker_color {   width: 50%;   height: 30px;   line-height: 30px; }   .turn_down_view {   width: 100%;   height: 30px;   display: flex;   flex-direction: row;   justify-content: center; }   .picker_text {   width: 50%;   height: 30px;   line-height: 30px;   font-size: 30rpx;   text-align: center; }   .img_down {   width: 20px;   height: 20px;   margin-top: 5px; }   .text_check {   width: 6%;   height: 30px;   line-height: 30px;   font-size: 30rpx;   text-align: center; }   .order_query_item:active{   background-color: rgb(223, 11, 11); }

js: 

var animation // 时间 const date = new Date() const years = [] const months = [] const days = []   for (let i = 1990; i <= date.getFullYear(); i++) {   years.push(i) }   for (let i = 1; i <= 12; i++) {   var k = i;   if (0 <= i && i <= 9) {     k = "0" + (i);   } else {     k = (i);   }   months.push(k) }   for (let i = 1; i <= 31; i++) {   var k = i;   if (0 <= i && i <= 9) {     k = "0" + (i);   } else {     k = (i);   }   days.push(k) }   Page({     /**    * 页面的初始数据    */   data: {     currentIndex: 0,     dateValue: '选择时间',      },   datePickerBindchange: function (e) {     this.setData({       dateValue: e.detail.value     })   },   pickChange: function (e) {     this.setData({       index: e.detail.value     });   },   /**    * 生命周期函数--监听页面加载    */   onLoad: function (options) {     },     /**    * 生命周期函数--监听页面初次渲染完成    */   onReady: function () {     },     /**    * 生命周期函数--监听页面显示    */   onShow: function () {     },     /**    * 生命周期函数--监听页面隐藏    */   onHide: function () {     },     /**    * 生命周期函数--监听页面卸载    */   onUnload: function () {     },     /**    * 页面相关事件处理函数--监听用户下拉动作    */   onPullDownRefresh: function () {     },     /**    * 页面上拉触底事件的处理函数    */   onReachBottom: function () {     },     /**    * 用户点击右上角分享    */   onShareAppMessage: function () {     } })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

-六神源码网