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

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

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

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

(0)

相关推荐

  • 微信小程序picker多列选择器(mode = multiSelector)

    目录 一.效果图(多列) 二.普通选择器:mode = selector.多列选择器:mode = multiSelector 三.app.json 四.picker.wxml 五.picker.js vue-next-admin,这是基于 vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + next.vuex,适配手机.平板.pc 的后台开源免费模板库 一.效果图(多列) 二.普通选择器:

  • 微信小程序自定义多列选择器使用详解

    一.预览 微信小程序在自带的表单组件中加入了选择器picker,并给出了常用的时间和省市区三级联动选择器,但日常开发中不可能仅仅使用这些选择器,所以我们在学习时先写一个常见的自定义选择器,用于满足项目中的日常需要. 先给出效果图:(先声明选择器中数据为测试使用,与真实情况无关) 二.picker属性 一个简单地多列选择器只要给picker组件加属性mode="multiSelector"即可,绑定数据时使用range来绑定一个数组作为显示内容,下面是官方给出的属性解释. 三.创建组件

  • 微信小程序日期选择器使用详解

    本文实例为大家分享了微信小程序日期选择器的具体代码,供大家参考,具体内容如下 需求:在小程序开发中,时常会遇到日期选择器.时间选择器或者地区选择器来进行选择的功能.往往设计图上面并不是按部就班沿用官方提供那种控件样式来实现显示,比如:样式会多样化.功能会复杂化.这时我们就要自己写一个适合需求的组件. 下面跟大家分享下我写的一个自定义日期选择器组件 首先上效果图看看: 主要步骤: 第一步:首先自定义选择器组件需要用到picker-view跟picker-view-column.使用方法如下~ <p

  • 微信小程序多项选择器checkbox

    本文实例为大家分享了微信小程序多项选择器checkbox的具体代码,供大家参考,具体内容如下 第一的话就是我们的相关的布局文件: <view class="container">   <view class="page-body">     <view class="page-section page-section-gap">       <view class="page-section-t

  • 微信小程序实现自定义picker选择器弹窗内容

    微信小程序中定义好的几种picker选择器,不管是日期选择器还是地区选择器,或是其他的都有定死的样式和内容. 例如: 但是大多数开发程序的情况下还是需要自己写样式的,或是内容的. 例如: wxml <view class="free-btns" style="margin-top: 10vh;background:none;"> <button class="free-btn" bindtap="toggleDialo

  • 微信小程序自定义滚动选择器

    本文实例为大家分享了微信小程序自定义滚动选择器的具体代码,供大家参考,具体内容如下 最近项目里有个需求要做个滚动选择器,在网上找了半天也没找到合适的demo,没办法只能发挥我的聪明才智创造一个,上代码. js: // pages/xuanzeqi/xuanzeqi.js Page({   /**    * 页面的初始数据    */   data: {     list: ['0分', '1分', '2分', '3分', '4分', '5分', '6分', '7分', '8分', '9分', '

  • 微信小程序自定义多列选择器使用

    本文实例为大家分享了微信小程序自定义多列选择器的具体代码,供大家参考,具体内容如下 项目需要,需要实现一个多列选择器,在用户确定之前,无论列表如何转,都不会影响已确定值的显示,只要用户选择确定才会把新选择的内容更新到已确定的显示值上. 目前个人思路是保存两份,一份用来存放用户选择的中间值,当用户点击确定时,把中间值更新为已确认值.如果用户选择取消,就把中间值更新为已确认值. 因为微信小程序中的多列选择器是用数组存放数据,因此在拷贝中涉及到深拷贝,必须是深拷贝才能实现上面的设想.因此可以下面代码实

  • 微信小程序自定义时间段picker选择器

    本文实例为大家分享了微信小程序自定义时间段picker选择器的具体代码,供大家参考,具体内容如下 想实现一个可以选择年份和时间段的日期选择器,如下所示 微信小程序自带的picker组件虽然能实现如上的内容,但不能实现样式的修改,不太符合小程序的设计主题,所以考虑了以下两种方法来实现如上的设计. 1.自定义date-picker 把要实现的date-picker封装为一个组件,组件内套用小程序自带的picker-view组件,其中picker_view-column表示不同的选择列,这样可以方便地

  • mpvue微信小程序多列选择器用法之省份城市选择的实现

    前言 微信小程序默认给我们提供了一个省市区的picker选择器,只需将mode设置为region即可 <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}" > 因为小程序默认提供的省市区选择器只能保存名称,不能保存id,而且我也不需要选择三级城市,所以这里打算通过mode

  • 微信小程序多列选择器range-key使用详解

    本文实例为大家分享了微信小程序多列选择器的具体代码,供大家参考,具体内容如下 <picker mode="multiSelector" bindchange="bindMultiPickerChange2" bindcolumnchange="bindMultiPickerColumnChange2" value="{{multiIndex}}" range="{{objectMultiArray}}"

随机推荐