实现微信小程序picker 省市区 自定义数据 支持三级联动

简介: 实现微信小程序picker 省市区 自定义数据 支持三级联动

再使用微信小程序时

发现 当 mode="region"   时数据 选择的省市区的数据不支持后台返回的数据

以下实现后台返回数据操作

先设置HTML

name 字段名字要替换掉

    <view class=" h-100 b-b l-h-100">
        <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" range-key="name" value="{{multiIndex}}" range="{{multiArray}}">
          <view class="picker flex-r">
            <view class="bold"><text class="c-f00">*</text>地区</view> <text> {{multiArray[0][multiIndex[0]].name}}{{multiArray[1][multiIndex[1]].name}}{{multiArray[2][multiIndex[2]].name}} </text>
          </view>
        </picker>
      </view>

在data中

data:{
      multiArray: [],//地区
      multiIndex: [0, 0, 0],
      type:0,
}

首次进来查询省市区数据

// POST 开发完成 
  // 获取省市区
   首次调用 type传0
  code 为查询下级的id  code 为空时则查询省
  getcitycode(type,code){
    var self=this
    var {multiArray,multiIndex,code,street}=this.data
    app.ajax({
      code,
      url: '/shenshiqu',
    }, function (result) {
      multiArray[type]=result.data.data
      if(type<2)self.getcitycode(type+1,result.data.data[index].taobaoid)
    })
  },

当滚动省获或者市时 更新 并联动

// 选择省市区
  bindMultiPickerChange: function (e) {
    console.log('picker发送选择改变,携带值为', e.detail.value)
    this.setData({multiIndex: e.detail.value})
  },
  // 选择省市区
  bindMultiPickerColumnChange: function (e) {
    console.log('修改的列为', e.detail.column, ',值为', e.detail.value);
    var data = {
      multiArray: this.data.multiArray,
      multiIndex: this.data.multiIndex
    };
    data.multiIndex[e.detail.column] = e.detail.value;
    switch (e.detail.column) {
      case 0:
        console.log(data.multiArray[e.detail.column][e.detail.value].taobaoid)
        this.getcitycode(1,data.multiArray[e.detail.column][e.detail.value].taobaoid)
        break;
      case 1:
          console.log(data.multiArray[e.detail.column][e.detail.value].taobaoid)
          this.getcitycode(2,data.multiArray[e.detail.column][e.detail.value].taobaoid)
          break;
    }
    this.setData(data);
  },

喜欢的可以加人前端面试题库,方便使用  微信搜索 “MST题库”

或者扫码查看  或有问题的扫码联系

相关文章
|
4月前
|
JSON 安全 定位技术
微信附近人提取v3脚本, 微信附近人id提取技术插件,采集附近人wxid数据工具
本内容介绍微信“附近的人”功能的技术原理与实现方法,基于LBS服务,涉及位置模拟、协议分析及数据解析。通过修改GPS坐标或使用Frida等工具hook位置函数
|
8月前
|
缓存 小程序 API
微信小程序页面导航与路由:实现多页面跳转与数据传递
本文深入探讨微信小程序的页面导航与路由机制,介绍多种页面跳转方式如`wx.navigateTo`、`wx.redirectTo`、`wx.switchTab`等,并讲解通过URL、全局变量和事件传递数据的方法。结合案例实现多页面跳转与数据传递,帮助开发者掌握这一重要技能。
|
8月前
|
缓存 小程序 API
微信小程序网络请求与API调用:实现数据交互
本文深入探讨了微信小程序的网络请求与API调用,涵盖`wx.request`的基本用法、常见场景(如获取数据、提交表单、上传和下载文件)及注意事项(如域名配置、HTTPS协议、超时设置和并发限制)。通过一个简单案例,演示了如何实现小程序与服务器的数据交互。掌握这些技能将帮助你构建功能更丰富的应用。
|
10月前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十三、自定义一个运动分析器,实现计时计数02
本文介绍如何利用“云智AI运动识别小程序插件”开发AI运动小程序,详细解析了俯卧撑动作的检测规则构建与执行流程,涵盖卧撑和撑卧两个姿态的识别规则,以及如何通过继承`sports.SportBase`类实现运动分析器,适用于小程序开发者。
|
10月前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十二、自定义一个运动分析器,实现计时计数01
随着AI技术的发展,AI运动APP如雨后春笋般涌现,如“乐动力”、“天天跳绳”等,推动了云上运动会、线上健身等热潮。本文将指导你从零开始开发一个AI运动小程序,利用“云智AI运动识别小程序插件”,介绍运动识别原理、计量方式及运动分析器基类的使用,帮助你在小程序中实现运动计时和计数功能。下篇将继续探讨运动姿态检测规则的编写。
|
12月前
|
小程序
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
1958 1
|
12月前
|
小程序 搜索推荐 API
微信小程序:自定义关注公众号组件样式
尽管关注公众号组件的样式固定且不可修改,但产品经理的需求却需要个性化的定制。在这种情况下,我们需要寻找解决方案,以满足这些特殊需求,尽管这可能有点棘手。
529 0
微信小程序:自定义关注公众号组件样式
|
25天前
|
消息中间件 人工智能 Java
抖音微信爆款小游戏大全:免费休闲/竞技/益智/PHP+Java全筏开源开发
本文基于2025年最新行业数据,深入解析抖音/微信爆款小游戏的开发逻辑,重点讲解PHP+Java双引擎架构实战,涵盖技术选型、架构设计、性能优化与开源生态,提供完整开源工具链,助力开发者从理论到落地打造高留存、高并发的小游戏产品。
|
2月前
|
小程序 JavaScript API
uni-halo + 微信小程序开发实录:我的第一个作品诞生记
这篇文章介绍了使用uni-halo框架进行微信小程序开发的过程,包括选择该框架的原因、开发目标以及项目配置和部署的步骤。
uni-halo + 微信小程序开发实录:我的第一个作品诞生记
|
8月前
|
自然语言处理 搜索推荐 小程序
微信公众号接口:解锁公众号开发的无限可能
微信公众号接口是微信官方提供的API,支持开发者通过编程与公众号交互,实现自动回复、消息管理、用户管理和数据分析等功能。本文深入探讨接口的定义、类型、优势及应用场景,如智能客服、内容分发、电商闭环等,并介绍开发流程和工具,帮助运营者提升用户体验和效率。未来,随着微信生态的发展,公众号接口将带来更多机遇,如小程序融合、AI应用等。

热门文章

最新文章

下一篇
日志分析软件