微信小程序-自定义三级联动

最新推荐文章于 2025-05-20 11:11:30 发布

chibimarukochan

最新推荐文章于 2025-05-20 11:11:30 发布

阅读量8.1k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：自定义三级联动

本文链接：https://blog.youkuaiyun.com/ChibiMarukoChan/article/details/90713814

本文介绍如何在微信小程序中创建一个城市-维修站-人员的三级联动效果，利用picker组件的multiSelector模式，详细讲解了数据结构的设置、初始化、以及在不同列选择时动态更新数据的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

不像省市区可以直接使用小程序的组件，这边自己定义一个城市-维修站-人员的三级联动效果。

运用picker组件，设置mode 的合法值为multiSelector（多列选择器）；

其中range是一个二维数组，只要按二维数组格式[[],[],[]]填入数据即可。

    <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{
  
  {multiIndex}}" range="{
  
  {multiArray}}">
    <view class="picker">
      {
  
  {multiArray[0][multiIndex[0]]}}，{
  
  {multiArray[1][multiIndex[1]]}}，{
  
  {multiArray[2][multiIndex[2]]}}
    </view>

在data中初始数据：

data:{
    city: '',//存放地区
    station: '',//存放维修站
    perList:'',// 存放维修人员
    multiArray: [[], [], []],
    multiIndex: [0, 0, 0],
}

onLoad中加载数据：正常是后台请求数据，这边就直接定义数据格式了。请求的数据按照这个格式填充就可以了。

最低0.47元/天解锁文章

200万优质内容无限畅学