实现微信小程序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题库”

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

相关文章
|
13天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的共享单车数据存储系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的共享单车数据存储系统附带文章源码部署视频讲解等
11 1
|
19天前
|
小程序 安全
微信小程序自定义底部导航栏
微信小程序自定义底部导航栏
|
20天前
|
JSON 小程序 搜索推荐
微信小程序如何自定义tabbar
微信小程序如何自定义tabbar
18 3
|
30天前
|
JSON 小程序 JavaScript
实现小程序与SSM后台数据交互
该文介绍了如何实现小程序与SSM后台的数据交互。在Java控制器中,通过`@RequestMapping`注解的`queryShop`方法处理HTTP请求,设置响应头允许跨域并返回JSON格式的商品列表。小程序端使用wx.request进行GET请求,接收到数据后在控制台打印。示例还包括了传递参数的方法和展示的交互效果图片。
23 2
|
30天前
|
JSON 小程序 JavaScript
微信小程序页面传参(多条数据的传递)
本文介绍了微信小程序中页面间参数传递的方法。1) 单个数据传递:通过`wx.navigateTo`将ID拼接在URL中传递,接收页面在`onLoad`中获取。2) 多个参数传递:将数据转换为JSON字符串,然后通过URL参数传递,接收页面同样在`onLoad`中解析JSON恢复数据。3) 提到了JSON作为数据交换格式的基础知识。全文鼓励读者尝试并点赞。
26 1
|
21天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的旅游数据附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的旅游数据附带文章源码部署视频讲解等
14 0
|
22天前
|
Python 数据格式
使用Python批量处理微信榜单数据
使用Python批量处理微信榜单数据
|
27天前
|
JavaScript Java 测试技术
基于小程序的个人健康数据管理系统+springboot+vue.js附带文章和源代码设计说明文档ppt
基于小程序的个人健康数据管理系统+springboot+vue.js附带文章和源代码设计说明文档ppt
30 0
|
5天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的小程序疫苗预约网站系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的小程序疫苗预约网站系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
4天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的校园导航微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的校园导航微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
21 4