微信小程序月日选择及滚动选择器

微信小程序月日选择及滚动选择器

本人是一个萌新,如有不对的地方请多多指教 。
先看效果。
在这里插入图片描述
上图为联动 效果,有一个问题就是 不能控制滚动面板。
上代码?

.wxml

<!--pages/switps/switps.wxml-->
<view>
  <view class="select_date">
    <picker  mode="multiSelector" bindchange="bindMultiPickerChange" value="{{multiIndex}}" range="{{multiArray}}">
      <view class="select">
        <image class="select_icon" src="../image/date.png"></image>
        <view class="picker">{{date}}</view>
        <image class="select_icon" src="../image/last1.png"></image>  
      </view>
    </picker>   
  </view>
  <view>
    <scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%;">
        <view id="demo1" class="scroll-view-item_H demo-text-1"  wx:for="{{items}}" wx:for-index='key' wx:key="id">
          <view>{{item.date}}</view>
          <view class="{{key==isshow?'blues':''}}">
            <view class="blues_data">{{item.day}}</view>
            <view class="dop" style="display:{{key>2&&key<=isshow?'':'none'}}"></view>
          </view>
        </view>
    </scroll-view>
  </view>
</view> 

.js


Page({
  data: {
    isshow:'3',
    select_class:'blues',
    date: '3月1日',
    multiArray: [[],[]],
    items:[]
  },
  
  bindMultiPickerChange: function(e) {
    var date = this.data.multiArray[0][e.detail.value[0]]+this.data.multiArray[1][e.detail.value[1]]
    this.setData({date: date})
  },
  DateArray(){
    var a = [[],[]]
    for(var i=1;i<=12;i++){a[0].push(i.toString()+'月');}
    for(var j=1;j<30;j++){a[1].push(j.toString()+'日'); }
    this.setData({multiArray:a})
  },
  
  switpdate(month){
    var dates = []
    for(var i=0;i<this.mGetDate(2020, month);i++){
      dates.push({
        'date':this.getWeek('2020-'+month+'-'+(i+1).toString()),
        'day':i+1})}
    dates.unshift(66,77,11);
    dates.push(44,55,56);
    this.setData({items:dates})
  },

  mGetDate(year, month){
    var d = new Date(year, month, 0);
    return d.getDate();
  },

  getWeek(dateString) {
      var myDate = new Date();
      var dateArray = dateString.split("-");
      var date = new Date(myDate.getFullYear(), parseInt(dateArray[1] - 1), dateArray[2]);
      return "星期" + "日一二三四五六".charAt(date.getDay());
  },
  scroll(e){
    var ss =  this.data.date.replace(/月/g,'-')
    ss = ss.replace(/日/g,'-')
    var aa = ss.split('-')
    this.setData({
      isshow:parseInt(e.detail.scrollLeft/50+3).toString(),
      date: aa[0]+'月'+(parseInt(this.data.isshow)-2).toString()+'日',
    })
  },
  onLoad: function (options) {
    this.DateArray();
    this.mGetDate(2020, 11)
    this.switpdate(11)
     var myDate = new Date();
     var date = (myDate.getMonth()+1).toString()+'月'+(myDate.getDate()).toString()+'日'
     this.setData({date: date})
  }
})
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 微信小程序中的Picker组件可以实现选择时分秒的功能。 首先,我们需要在小程序的页面中引入Picker组件,并在wxml文件中定义一个Picker组件的容器,例如: ```html <view class="picker-container"> <picker mode="date" bindchange="onDateChange"> <view class="picker-content">{{selectedDate}}</view> </picker> </view> ``` 上述代码中,使用`picker`标签定义了一个Picker组件,设置`mode`属性为`date`表示选择期。`bindchange`属性绑定了一个事件处理函数`onDateChange`,用于在选择期时触发相应的操作。`picker`标签内的`view`标签可以用来显示选择期。 接下来,在小程序的页面对应的js文件中,我们需要定义`onDateChange`事件处理函数,并在函数中处理年时分秒的选择。例如: ```javascript Page({ data: { selectedDate: '' }, onDateChange(e) { const value = e.detail.value; this.setData({ selectedDate: value }); // 在这里可以继续添加代码处理选中的年时分秒 } }); ``` 上述代码中,`onDateChange`事件处理函数获取了选择期信息,将其保存在`selectedDate`数据中,然后可以在函数体内继续添加代码,处理选中的年时分秒。 总结起来,通过Picker组件的引入和事件处理函数的编写,我们可以在微信小程序中实现年时分秒的选择功能。 ### 回答2: 微信小程序的picker组件是一种方便用户选择期和时间的工具。其中,年时分秒是picker所支持的不同选择项。 在微信小程序中使用picker组件,我们可以设置mode属性来定义选择器的模式。为了选择时分秒,我们可以将mode属性设置为"datetime"。 在picker的使用过程中,我们可以通过设置start和end属性来限制可选择期和时间范围。例如,我们可以设置start为当前时间,end为未来某个时间,以确保用户只能选择当前时间以后的期和时间。 通过以上设置,当用户点击picker组件时,会弹出一个滚动选择器,分为年、、时、分和秒六个滚动列表。用户可以通过滑动这些列表来选择所需的期和时间选择器的每个滚动列表默认都有一个固定的范围,比如年份范围通常为当前年份加减10年。用户可以通过滚动列表来选择他们想要的年、、时、分和秒。 当用户完成选择后,我们可以通过绑定picker的change事件来获取用户所选的期和时间。在change事件的回调函数中,我们可以通过event.detail.value来获取用户选择期和时间值。 综上所述,微信小程序的picker组件可以方便地实现年时分秒的选择功能。通过设置适当的属性和监听change事件,我们可以根据用户的选择来进行相应的操作。无论是用于预约、倒计时或者其他时间相关的功能,picker组件都能够满足用户的需求。 ### 回答3: 微信小程序中的picker组件可以用来选择时分秒。在使用picker组件时,我们可以通过设置mode属性为'date'来选择,设置为'time'来选择时分秒,还可以设置为'dateTime'来选择时分秒。 当设置mode属性为'date'时,picker会显示一个选择器,我们可以通过设置start和end属性来限制可以选择期范围。例如,设置start为'2010-01-01',end为'2022-12-31',用户只能在这个期范围内进行选择选择期将会以字符串的形式返回。 当设置mode属性为'time'时,picker会显示一个时间选择器,可以选择时分秒。同样,我们可以通过设置start和end属性来限制可选择时间范围。选择时间将会以字符串的形式返回。 当设置mode属性为'dateTime'时,picker会显示一个时间选择器,可以选择时分秒。同样,我们可以通过设置start和end属性来限制可选择时间范围。选择时间将会以字符串的形式返回。 在使用picker时,可以通过bindchange属性来监听用户选择的值的变化,从而执行相应的代码逻辑。例如,当选择器的值发生变化时,可以将选择的值存储在数据中,并更新页面的展示内容。 总之,微信小程序的picker组件提供了便捷的年时分秒选择功能,在开发时可以根据实际需求设置mode属性,并通过监听用户选择的值的变化来处理相应的业务逻辑。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值