微信小程序实现多列选择器

 更新时间:2022年07月07日 10:23:37   作者:In Heaven  
这篇文章主要为大家详细介绍了微信小程序实现多列选择器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

<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()
    }
  },

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

相关文章

  • JS中的二叉树遍历详解

    JS中的二叉树遍历详解

    这篇文章主要为大家详细介绍了JS中的二叉树遍历,何为二叉树,什么是二叉树的遍历,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • JS组件Bootstrap Select2使用方法详解

    JS组件Bootstrap Select2使用方法详解

    这篇文章主要为大家介绍了JS组件Bootstrap Select2使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • JavaScript打印iframe内容示例代码

    JavaScript打印iframe内容示例代码

    打印iframe内容的方法有很多,下面为大家简单介绍下使用JavaScript实现打印,有需求的朋友可以参考下
    2013-08-08
  • 输入npm run xxx后执行原理深入解析

    输入npm run xxx后执行原理深入解析

    这篇文章主要为大家介绍了输入npm run xxx后执行原理深入解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • layui监听单元格编辑前后交互的例子

    layui监听单元格编辑前后交互的例子

    今天小编就为大家分享一篇layui监听单元格编辑前后交互的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JS验证邮件地址格式方法小结

    JS验证邮件地址格式方法小结

    这篇文章主要介绍了JS验证邮件地址格式方法,结合两个实例形式分析了JavaScript基于正则表达式进行邮件格式验证的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-12-12
  • javascript的switch用法注意事项分析

    javascript的switch用法注意事项分析

    这篇文章主要介绍了javascript的switch用法注意事项,实例分析了switch语句进行判定的原理与使用技巧,非常具有实用价值,需要的朋友可以参考下
    2015-02-02
  • video.js使用改变ui过程

    video.js使用改变ui过程

    这篇文章主要介绍了video.js使用改变ui的过程,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-03-03
  • 微信小程序实现多行文字超出部分省略号显示功能

    微信小程序实现多行文字超出部分省略号显示功能

    这篇文章主要介绍了微信小程序实现多行文字 超出部分省略号显示功能,比如设置只显示2行,超出部分省略号显示,本文通过实例代码给大家介绍,需要的朋友可以参考下
    2019-10-10
  • js数组高阶函数之includes()方法总结

    js数组高阶函数之includes()方法总结

    JS的数组是一种特殊的对象,其特点是在值的列表中按照顺序存放值,在 JS中,数组是由中括号 [] 括起来的数值序列,本篇文章给大家介绍js数组高阶函数——includes()方法,感兴趣的朋友一起看看吧
    2023-12-12

最新评论