微信小程序 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

SOLIDWORKS无法获得下列许可 无效的使用许可号码(-8,544,0) 解决办法大全

SOLIDWORKS无法获得下列许可 无效的使用许可号码(-8,544,0) 解决办法大全。版本:SolidWorks2021。电脑:惠普战66四代。软件安装不困难!

qq_43596278的博客 11万+

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

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

止于至善 5万+

Unity Acceleratorc与Cache Server unity的缓存服务器

文章目录1.作用概述2.用法(使用,看这个就够了)服务端下载部署Unity Acceleratorc修改http管理端口修改Editor连接端口客户端使用(设置好一次提交设置,团队拉取即可全部生效)3.测试平台切换测试资源导入测试(打开编辑器的情况下)项目启动测试(不打开编辑器的情况下)4.不同版本表现5.服务端监控6.服务端缓存7.冲突8.预警9.不同项目/不同配置-同种资源10.缓存清除 1.作用概述 编辑器模式下,导入资源,切换平台unity都会重新识别资源,大型项目很浪费时间,使用Cache Ser

euphorias的博客 3812

果蔬及菜品识别系统

果蔬及菜品识别系统

我的博客 2118

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

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

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

PCL1.12.1+VTK9.1+Qt5.14.2实战:解决QVTKOpenGLNativeWidget点云渲染窗口初始化报错问题

本文针对PCL1.12.1、VTK9.1与Qt5.14.2集成开发中,QVTKOpenGLNativeWidget点云渲染窗口初始化时出现的报错与黑屏问题,提供了深度分析与两种实战解决方案。核心在于理解VTK版本升级导致的渲染窗口类型不匹配,并指导开发者通过显式创建vtkGenericOpenGLRenderWindow或利用窗口ID嵌入,正确初始化并绑定可视化组件,从而稳定实现点云渲染。

weixin_29284657的博客 221

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

Python 爬虫实战:爬取电商平台商品信息(价格 / 销量 / 评价)

摘要:本文详细介绍基于Python的电商商品信息爬取技术方案,以京东商品详情页为例,对比分析静态(BeautifulSoup)和动态(Selenium)两种爬取方式的实现逻辑。静态爬取适合获取基础信息,而动态爬取可解决JS渲染数据的获取问题。文章包含完整的代码实现、反爬规避策略及数据存储方案,涵盖商品名称、价格、销量、评价等核心数据提取。同时强调爬虫的合规使用,提供扩展方向建议,为电商数据采集提供实用技术参考。

2503_91057718的博客 2023

ZYNQ microblaze boot.bin固化步骤

一,ZYNQ移植软核的原理FPGA规模巨大而且功能复杂,因此设计的每一个部分都从头开始是不切实际的。一种解决的办法是:对于较为通用的部分可以重用现有的功能模块,而把主要的时间和资源用在设计中的那些全新的、独特的部分。这就像是你在开发应用程序的时候就不用直接去写驱动物理硬件的代码,而是直接调用Windows提供的API就行了。

wangjie36的博客 2782

记录-微信小程序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

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变(硬件篇)

输入电压采集上图为本设计的电源电路,图中 D1 为二极管, 其目的是防止正负极电源反接, 由于二极 管的正向导通特性, 用户反接电源时亦不会烧坏后级电路。图中 R8、R9 组成分压电路, 由单片机 AD 采集 IO 口 P14 采集 AD 值, 并由计算公式电压 =133300(AD/4096)mV;

Naiva的博客 1995

微信小程序使用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

cartographer运行错误集合

播放bag的时候错误 Check failed: sensor_to_tracking->translation().norm() < 1e-5 The IMU frame must be colocated with the tracking frame. Transforming linear acceleration into the tracking frame will otherwise be imprecise tracking frame不是imu的link 修改lua文件中的.

Studying…… 2023

锂电池充电器电路设计 里面有电路

锂电池充电器电路设计 里面有电路 3.7V升压到5V电路设计。

微信小程序 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

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

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

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

weixin_46337813的博客 1010

ssm框架搭建

这个是一个在idea上成功跑起来的ssm框架项目,保存在这里方便以后使用直接下载

SAP B1中文培訓教材_SDK

公司内部培训资料,对开发工具 ,DIAPI, UIAPI,Add-ON有详细解说

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、付费专栏及课程。

余额充值