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

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

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

.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
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值