微信小程序 picker 多级联动

微信小程序picker多列选择器:四级联动 【代码】小程序picker多列选择器:四级联动。 阅读详情
<picker
          mode="multiSelector"
          bindchange="bindjobcatchange"
          bindcolumnchange="bingjobcatcolumnchange"
          value="{{multiIndex}}"
          range="{{job_cat_list}}"
           range-key="{{'cat_name'}}"
        >
          <view class="picker">
            {{fenlei_title}}
          </view>
        </picker>
Page({
  data: {
    server_url: app.globalData.URL,
    fenlei_title:'分类',
    job_cat_list:[],
    multiIndex: [0,0,0],
    filter:{
      keywords:'',
      job_cat_id:''
    }
  },
  onLoad: function () {   
    this.jobcat();
  },
  jobcat: function() {
    var that = this;
    wx.request({
      url: app.globalData.URL + "/xxx/eeee",
      data: {
        x: '',
        y: ''
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        var data = res.data.data;
        that.setData({
          job_cat_list: [data, data[0]['children'], data[0]['children'][0]['children']]
        });
      }
    });
  },
  bindjobcatchange: function(e){
    this.setData({multiIndex:e.detail.value})
  },
  bingjobcatcolumnchange: function(e){
    var index = this.data.multiIndex;
    const data = {
      job_cat_list: this.data.job_cat_list,
      multiIndex: this.data.multiIndex
    }
    this.data.multiIndex[e.detail.column] = e.detail.value;

    if (e.detail.column==0){
        data.job_cat_list[1] = this.data.job_cat_list[0][index[0]]['children'];
        data.job_cat_list[2] = data.job_cat_list[1][index[1]]['children'];
    }else if(e.detail.column===1){
        data.job_cat_list[2] = data.job_cat_list[1][index[1]]['children'];
        this.data.filter.job_cat_id = data.job_cat_list[2][index[2]]['cat_name'];
    }else if(e.detail.column===2){
      this.data.filter.job_cat_id=data.job_cat_list[2][e.detail.value]['cat_name'];
    }

    this.setData(data)
  }

})
    public function jobcate(){
        $zp_job_catModel = new ZpJobCat();
        $job_cat = $zp_job_catModel->getcateAll();
        $i=0;
        $return_data = [];
        foreach ($job_cat as $key=>$val){
            $return_data[$i] = $val;
            $return_data[$i]['children'] = [];
            if (!empty($val['children'])){
                $c=0;
                foreach ($val['children'] as $k=>$v){
                    $return_data[$i]['children'][$c] = $v;
                    if (!empty($v['children'])){
                        $return_data[$i]['children'][$c]['children'] = [];
                        $m=0;
                        foreach ($v['children'] as $val2){
                            $return_data[$i]['children'][$c]['children'][$m] = $val2;
                            $m++;
                        }
                    }
                    $c++;
                }
            }
            $i++;
        }
        $this->_success($return_data);
    }

 

微信小程序多级联动实现 本节将继续讲述小程序picker控件的使用,上篇讲述的是单级下拉列表,本次讲述的是多级下拉列表 小程序实现联动下拉列表,为实现联动润滑的效果,需要将联动用到的所有数据请求到,然后再逻辑处理这些数据,避免选中上一级,下一级结果出现迟缓卡顿的现象 第一步,小程序端向后端php请求所有用到的区划数据 onload:function(){ var url = app.globalD... 阅读详情

相关推荐

微信小程序picker选择器实战:从数据绑定到表单提交的完整避坑指南

本文深入解析微信小程序picker选择器的实战应用,从数据绑定到表单提交的全流程避坑指南。通过详细讲解picker组件的工作机制、数据绑定技巧和表单处理策略,帮助开发者高效解决常见问题,提升开发效率。特别适合需要处理国家/地区选择器等表单场景的电商类小程序开发者。

weixin_30819085的博客 442

微信小程序Picker自定义数据多级联动

文章目录示例视频官方文档Picker使用多级picker多级联动代码示例 hello,i’m Shendi 最近在整微信小程序,在 picker 这个地方卡了很久,这里总结一下 示例视频 小程序picker多级联动示例视频 官方文档 https://developers.weixin.qq.com/miniprogram/dev/component/picker.html Picker使

砷碲 - Shendi 6674

uniapp开发小程序—picker结合后台数据实现二级联动的选择

uniapp开发小程序—picker结合后台数据实现二级联动的选择。

weixin_48596030的博客 3085

微信小程序<picker> 组件多级使用

【代码】微信小程序<picker> 组件多级使用。

weixin_56010087的博客 700

参照、修改citypicker做四级联动,数据异步获取,动态赋值

参照、修改citypicker做四级联动,数据异步获取,动态赋值

微信小程序实现的picker多级联动功能示例

主要介绍了微信小程序实现的picker多级联动功能,结合实例形式分析了微信小程序picker组件使用及wx.request后台交互相关操作技巧,需要的朋友可以参考下

小程序picker标题_微信小程序实现的picker多级联动功能示例

本文实例讲述了微信小程序实现的picker多级联动功能。分享给大家供大家参考,具体如下:wxml部分:mode="multiSelector"bindchange="bindjobcatchange"bindcolumnchange="bingjobcatcolumnchange"value="{{multiIndex}}"range="{{job_cat_list}}"range-key="{{...

weixin_39593061的博客 260

多元相关性分析_PAST:最简便易用的统计学分析软件教程目录

欢迎来到PAST的世界!本教程并不是将PAST的所有功能均进行详细介绍,而只是挑选与生物、医学、微生物研究相关的统计学分析内容进行讲述。根据PAST内各项分析的标签分类,将该教程具体设置如下:PAST软件介绍PAST的基本信息数据的输入和修改数据的转换和标准化图像绘制 (Plot标签)点线图和直方图散点图条形图和箱须图饼图堆叠条形图三元相图气泡图单变量统计学分析 (Univariate标...

weixin_39605706的博客 3156

微信小程序----picker选择器(picker、省市区选择器)(MUI选择器)

DEMO下载 效果图 实现原理 利用微信小程序的picker组件,其中: 1,普通选择器:mode = selector实现一级选择实例; 2,省市区选择器:mode = region实现省市区三级联动; 3, 多列选择器:mode = multiSelector实现二级和三级联动的10以内数字的乘法。 WXML view class=&amp;quot;tui-

止于至善 5万+

kaggle——销量预测的baseline(M5 Forecasting - Accuracy)

前言 在刚刚结束的kaggle比赛M5 Forecasting - Accuracy中,因为是第一次参加,笔者也是花了大量的时间和精力在上面,最终拿到一块银牌(所以我拿到了大学第一个考试挂科。。。求求电磁场老师高抬贵手给点平时分放我一马吧。。。早上看到kaggle成绩异常兴奋,中午考完直接爆炸=。=),当然运气占了很大因素,这次比赛private leadboard的shake up非常大,排名波动几千名都存在的。笔者运气不错,是向上的shake:)。这里总结一下销量预测的基本流程。 从下图可以看到这次比

weixin_43901221的博客 5432

图像质量评估:使用 SSIM 计算图像相似性

在图像处理领域,衡量两幅图像之间相似性的一种常见方法是使用结构相似性指数(SSIM)。SSIM 是一种全参考的图像质量评估指标,它不仅考虑了图像的亮度、对比度,还考虑了结构信息。在本文中,我们将介绍一个使用 Python 和 OpenCV 实现的 SSIM 计算脚本,并使用该脚本评估两幅图像的相似性。

hasque2019的博客 1153

uniapp用picker实现自定义三级联动(children)

【代码】uniapp用picker实现三级联动(children)

精通前端技术,了解后端接口 1494

QT 实现QStackedWidget切换页面右移动画

首先截取当前界面的图片,渲染到一个QLabel上,然后设置QPropertyAnimation动画,动画的作用对象就是这个QLabel,不断的改变geometry;当动画结束的时候,隐藏并释放这个QLabel。以下是一个QStackedWidget,放了两个QPushButton在上面,点击切换不同的界面。为了方便查看动画特效,设置了每个界面的背景图片。

希望能帮助大家,希望大家多多支持,你们的支持是我前进的动力。 882

MPX + Vant Weapp 在微信小程序中实现Picker选择器

目录功能概述实现步骤在MPX项目中引入Vant WeappPopup与Picker组件结合实现Picker选择器代码效果实现单页面中的多个Picker选择器代码Picker选择器的多级联动代码效果 功能概述 使用MPX框架开发微信小程序时,无法使用原生的Picker选择器,经试验,可以采用Vant Weapp的UI实现。 实现步骤 在MPX项目中引入Vant Weapp 通过 npm 安装 npm i @vant/weapp -S 在mpx文件中引用picker组件和popup组件(picker和po

hequhecong10857的博客 2958

Windows 下 Claude Code 使用全记录:从零到一的保姆级图文教程(持续更新)

本文主要介绍了Windows 下 Claude Code 使用全记录:从零到一的保姆级图文教程,希望能对学习使用 Claude Code 的同学们有所帮助。 文章目录 1. 背景 2. 实战教程(2026年最新教程) 2.1 步骤一 Claude Code 环境准备 2.2 步骤二 配置Claude Code 2.3 步骤三 对话 3. 老版本实战教程 3.1 步骤一 配置Node.js 3.2 步骤二 Claude Code配置 3.3 步骤三 配置Claude Code 3.4 步骤四 对话

weixin_43178406的博客 15万+

英飞凌TC3xx之一起认识GTM系列(一)先来认识GTM架构

本文讲述英飞凌TC3xx的通用计时器GTM的架构。

无所适从的我的博客 4598

记录-微信小程序picker多级联动级别不固定-又是令人头冷的一天

先贴上需求,后台返回的值结构中既有2级、也有3级和4级的children,要求联动。像这种级别不固定的数据格式,微信小程序提供的picker组件无法支持,时间又不够自己任性造轮子;就找了几家主流的小程序组件框架研究一下,强烈推荐**wux-weapp**框架,这个框架的组件很多,附上级联文档[wux-weapp-cascader](https://wux-weapp.github.io/wux-weapp-docs/#/cascader?id=%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8

yynikki的博客 876

【车载以太网】Eth Stack Bringup

摘要:本文基于AUTOSAR架构,详细介绍了在TC3xx硬件平台上实现EthStack Bringup的全过程。作者通过配置MCAL和Davinci工具,完成了EthTrcv、Eth、EthIf、EthSM和TcpIp等模块的集成,并解决了16字节内存对齐和以太网速率不匹配等问题。最终实现了PC端与开发板的Ping通,并通过WireShark验证了数据包收发。文章总结了调试中的关键问题与解决方案,强调了实践的重要性,为后续EthStack的深入分析奠定了基础。

qq_36056498的博客 182

微信小程序使用picker组件 - 省市二级联动

picker wxml代码 &amp;lt;view class=&quot;section&quot;&amp;gt; &amp;lt;view class=&quot;section__title&quot;&amp;gt;二级实例&amp;lt;/view&amp;gt; &amp;lt;picker mode=&quot;multiSelector&quot;

xiaojun_xie的博客 7081

预测股票价格趋势:使用MATLAB进行股票价格预测

通过收集股票数据、数据预处理、构建预测模型以及可视化结果,我们可以利用MATLAB强大的计算和分析功能来预测股票价格的走势。然而,需要注意的是,股票市场具有高度复杂性和不确定性,预测结果仅供参考,并不构成投资建议。然而,借助计算机编程和数据分析工具,我们可以利用历史股价数据来建立模型,并预测未来的股票价格走势。首先,我们需要获取股票的历史价格数据。完成模型的拟合后,我们可以使用该模型来进行未来股票价格的预测。最后,我们可以使用MATLAB的绘图功能将预测的股票价格与实际股票价格进行对比,并进行可视化展示。

2301_79326588的博客 1018

NTscan扫描工具

ntscan是一个扫描器,可以扫描没有密码和弱密码的共享,先到配置文件中填写猜测的用户名和密码,扫描过程中右侧出现的是扫描日志。

微信小程序 picker multiSelector 多列滚动 代码解读

https://developers.weixin.qq.com/miniprogram/dev/component/picker.html /** * e.detail.column : 列序号,从0开始,往右依次递增 * data.multiIndex[0] : 第一列的值序号,从0计数,往下依次递增 * data.multiIndex[1] : 第二列的值序号,从0计数,往下依次递增 * data.multiIndex[2] : 第三列的值序号,从0计数,往下依次递增 * * da

Top5软件工程硕士,先后在京东、字节从事多年Java后端开发、实时和离线大数据开发 1069

IDEA的使用指南

IDEA基于java的使用手册,可以最快速的上手,在使用中不断的丰富自己的使用技巧.

uniapp picker多级联动关于h5与微信小程序的兼容性的问题

uni-app picker 组件实现二级联动? - 凉介, - 博客园

weixin_46337813的博客 1010

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用,资源的后缀为tar.gz格式的压缩包

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。,新界面,新视觉,

uniapp自定义picker城市多级联动组件

uniapp自定义picker城市多级联动组件 支持多端——h5、app、微信小程序、支付宝小程序... 支持自定义配置picker插件级数 支持无限级 下载完整代码:https://github.com/aui-js/aui-uni 注意事项:插件传入数据格式为children树形格式,内部包含:id、name 组件运行图示: ![1](https://img-blog.csdnimg.cn/20200713172959163.png 组件选择后返回数据如: 引用示例: <templ

风如白话的博客 8095

微信小程序----日期时间选择器(自定义精确到分秒或时段)(MUI日期时间)

DEMO下载 效果图 实现原理 利用微信小程序的picker组件的多列选择器实现! WXML view class=&amp;quot;tui-picker-content&amp;quot;&amp;gt; view class=&amp;quot;tui-picker-name&amp;quot;&amp;gt;时间选择器(选择时分)view&amp;gt; pi

止于至善 11万+

微信小程序使用picker根据接口给的省市区的数据实现省市区三级联动或者省市区街道等多级联动

address1"/>const mulSelect1 = ref([]) //四级联动显示数组[[province],[city],[district],[street]]////省市区街道数组的编码[11,1111,111444,12220232]//省市区街道数组的下标[0,1,0,0]// console.log("选中的数组下标",addressIndex.value)if (e.detail.column == 0) {//省变化。const street = ref([]) //街道数组。

肖肖肖丽珠的博客 1815

微信小程序常用模块(form+switch+slider+checkbox+radio+textarea+picker等)

1、页面区域 // wxml区域 <view class="container"> <form bindsubmit="output"> <view class="title"> Form表单 </view> <view id="sitchArea"> <view class="mySwitch"> <text>siwthch组件1</text>

weixin_44818115的博客 508
上一篇: jquery 导出word文档及打印
下一篇: phpexcel 导入导出
xudejun
博客等级 码龄19年 7粉丝 37原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值