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

<picker class="picks" mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange"
   value="{{multiIndex}}" range="{{multiArray}}">
   <view class="picker {{seleNull == 0 ?'':'cur'}}">
     {{seleNull == 0 ? date:'请选择日期'}}
   </view>
   <image class="icon" src="../../images/down.png"></image>
</picker>

data: {
    seleNull: null,
    multiIndex: [0, 0, 0],
    multiArray: [],
    month: '',
    year: ''
  },
  onLoad: function (options) {
    var that = this
     that.return_date()
  },
  
// 获取历史记录日期
  return_date() {
    var that = this
    var datas = {
      type: that.data.tag,
      user_id: app.globalData.userId,
      month: that.data.month,
      year: that.data.year
    }
    wx.request({
      url: app.globalData.urlSrc + 'hardware/return_date',
      data: datas,
      method: "POST",
      header: {
        'content-type': app.globalData.head
      },
      success(res) {
        console.log('获取历史日期', res.data)
        var code = res.data.status
        if (code == 200) {
          var multiArray = res.data.data
          that.setData({
            multiArray: multiArray
          })
        }
      }
    })
  },
  // 多例选择
  bindMultiPickerChange: function (e) {
    var multiIndex = e.detail.value
    var multiArray = this.data.multiArray
    this.setData({
      multiIndex: multiIndex,
      seleNull: 0,
      date: multiArray[0][multiIndex[0]] + '-' + multiArray[1][multiIndex[1]] + '-' + multiArray[2][multiIndex[2]]
    })
    this.getmeasInfos()
  },

  // 控制单列
  bindMultiPickerColumnChange: function (e) {
    var that = this
    var data = {
      multiArray: that.data.multiArray,
      multiIndex: that.data.multiIndex,
      idx:e.detail.value,
      column : e.detail.column
    }
    // data.multiIndex[e.detail.column] = e.detail.value;
    if(data.column == 0){
      that.setData({
        year: data.multiArray[0][data.idx],
        month:''
      })
      data.multiIndex[1] = 0;
      data.multiIndex[2] = 0;
      that.return_date()
    }else  if(data.column == 1){
      that.setData({
        month: data.multiArray[1][data.idx]
      })
      data.multiIndex[2] = 0;
      that.return_date()
    }
  },

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 用Vue如何制作伸缩菜单，主要代码是什么

  这篇文章主要为大家详细介绍了vue实现伸缩菜单功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• Node.JS中path读取文件路径问题该如何处理

  nodejs中想要访问根目录同级目录里的文件，开始用__dirname，发现_dirname只是追加自身的目录路径，能调取到同级目录下的文件，却不能调取其他目录下的文件，尝试把文件路径换成相对路径可以访问成功，考虑到项目中不会去层层翻目录，翻了资料nodejs的fs模块大多是结合了nodejs的path模块使用，path.resolve和path.join两个方法能传入文件路径，并且文件不存在时会

• 用JS怎样做简单的视频弹幕功能?

  现在很多视频网站都有弹幕功能，视频弹幕功能还是比较有意思的，很多朋友都喜欢，对此，这篇文章我们就尝试用JS实现一个简单的视频弹幕功能。

• promise用法是什么，应用于什么场景

  这篇文章主要为大家介绍了promise结合requestAnimationFrame用法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

• vue的防抖和节流是什么意思？如何理解？

  vue的防抖和节流是什么意思？一些朋友可能对防抖和节流不是很了解，对此这篇文章就给大家具体的介绍一下什么是防抖和节流，感兴趣的朋友接下来跟随小编一起学习一下吧。