iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序实现多列选择器
  • 910
分享到

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

2024-04-02 19:04:59 910人浏览 八月长安
摘要

本文实例为大家分享了微信小程序实现多列选择器的具体代码,供大家参考,具体内容如下 <picker class="picks" mode="multiSelector" bind

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

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

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

--结束END--

本文标题: 微信小程序实现多列选择器

本文链接: https://www.lsjlt.com/news/153728.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 微信小程序实现多列选择器
    本文实例为大家分享了微信小程序实现多列选择器的具体代码,供大家参考,具体内容如下 <picker class="picks" mode="multiSelector" bind...
    99+
    2022-11-13
  • 微信小程序picker多列选择器(mode = multiSelector)
    目录一、效果图(多列)二、普通选择器:mode = selector、多列选择器:mode = multiSelector三、app.json四、picker.wxml五、picke...
    99+
    2022-11-12
  • 微信小程序picker多列选择器怎么用
    本篇内容主要讲解“微信小程序picker多列选择器怎么用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“微信小程序picker多列选择器怎么用”吧!vue-next-admin,这是基于 vue3...
    99+
    2023-06-08
  • 微信小程序中怎么实现一个picker多列选择器
    微信小程序中怎么实现一个picker多列选择器,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。一、效果图(多列)二、普通选择器:mode = selector、多列选择器:m...
    99+
    2023-06-20
  • 微信小程序自定义多列选择器使用
    本文实例为大家分享了微信小程序自定义多列选择器的具体代码,供大家参考,具体内容如下 项目需要,需要实现一个多列选择器,在用户确定之前,无论列表如何转,都不会影响已确定值的显示,只要用...
    99+
    2022-11-13
  • 微信小程序如何自定义多列选择器
    今天小编给大家分享一下微信小程序如何自定义多列选择器的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。项目需要,需要实现一个多列...
    99+
    2023-07-02
  • 微信小程序实现课程选择器
    本文实例为大家分享了微信小程序实现课程选择器的具体代码,供大家参考,具体内容如下 话不多说,直接上效果图 代码如下 wxml <view class="urg_input"&...
    99+
    2022-11-13
  • 微信小程序多项选择器checkbox
    本文实例为大家分享了微信小程序多项选择器checkbox的具体代码,供大家参考,具体内容如下 第一的话就是我们的相关的布局文件: <view class="container...
    99+
    2022-11-13
  • 微信小程序实现时间选择
    本文实例为大家分享了微信小程序实现时间选择的具体代码,供大家参考,具体内容如下  xml:  <view class="day-check" style=...
    99+
    2022-11-13
  • 微信小程序picker选择器怎么实现
    本篇内容主要讲解“微信小程序picker选择器怎么实现”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“微信小程序picker选择器怎么实现”吧!picker选择器分为三种,普通选择器,时间选择器,...
    99+
    2023-06-26
  • 微信小程序中怎么自定义一个多列选择器
    这篇文章给大家介绍微信小程序中怎么自定义一个多列选择器,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。在.wxml建一个自定义picker组件:<picker  &nbs...
    99+
    2022-10-19
  • 微信小程序城市选择器如何实现
    这篇文章主要讲解了“微信小程序城市选择器如何实现”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“微信小程序城市选择器如何实现”吧!城市选择器 region//index.wxml<pic...
    99+
    2023-06-26
  • 实现微信小程序中的多级联动选择器效果
    实现微信小程序中的多级联动选择器效果,需要具体代码示例随着微信小程序的普及和发展,越来越多的开发者开始关注小程序的开发技巧和实现效果。其中,多级联动选择器是小程序中常见的一种选择器效果,能够提供良好的用户体验和交互效果。本文将介绍如何在微信...
    99+
    2023-11-21
    微信小程序 选择器 多级联动
  • 微信小程序实现列表条件筛选
    本文实例为大家分享了微信小程序实现列表条件筛选的具体代码,供大家参考,具体内容如下 最近一个旅游项目,关于筛选框的代码 wxml文件  <view class='ch...
    99+
    2022-11-13
  • 微信小程序实现日期范围选择
    本文实例为大家分享了微信小程序实现日期范围选择的具体代码,供大家参考,具体内容如下 样式如下: 分别点击开始日期和结束日期选择时间(底部弹框): date.wxml:  <...
    99+
    2022-11-13
  • 微信小程序选择器怎么用
    这篇文章主要介绍“微信小程序选择器怎么用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“微信小程序选择器怎么用”文章能帮助大家解决问题。页面结构<!--pages/warn/index.wxml...
    99+
    2023-06-26
  • 微信小程序多项选择器checkbox怎么使用
    这篇文章主要介绍“微信小程序多项选择器checkbox怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“微信小程序多项选择器checkbox怎么使用”文章能帮助大家解决问题。第一的话就是我们的相...
    99+
    2023-07-02
  • 微信小程序实现多选框全选操作
    本文实例为大家分享了微信小程序实现多选框全选的具体代码,供大家参考,具体内容如下 test.wxml <view class="container">     <!...
    99+
    2022-11-13
  • 实现微信小程序中的日期选择器效果
    随着微信小程序的广泛应用,越来越多的开发者需要实现日期选择器效果来提高用户体验。本文将介绍如何在微信小程序中实现日期选择器效果,并给出具体的代码示例。一、实现思路实现日期选择器效果的基本思路是:首先在 WXML 中建立日期选择器组件,通过 ...
    99+
    2023-11-21
    微信小程序 实现 日期选择器
  • 微信小程序如何实现列表条件筛选
    这篇文章主要介绍“微信小程序如何实现列表条件筛选”,在日常操作中,相信很多人在微信小程序如何实现列表条件筛选问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”微信小程序如何实现列表条件筛选”的疑惑有所帮助!接下来...
    99+
    2023-07-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作