微信小程序 - picker-viewer实现省市选择器

卡卡舅舅

已于 2024-04-08 21:34:18 修改

阅读量948

点赞数 3

分类专栏：微信小程序文章标签：微信小程序

于 2024-03-23 13:39:49 首次发布

本文链接：https://blog.csdn.net/qq_37011724/article/details/136965819

版权

微信小程序专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了如何在微信小程序中使用picker-viewer组件创建一个省市选择器，包括布局代码和JavaScript逻辑，重点在于监听provinceCode变化以动态加载cities数据。

摘要由CSDN通过智能技术生成

简介

本文会基于微信小程序picker viewer组件实现省市选择器的功能。

实现效果

实现代码

布局

<picker-view value="{{value}}" bindchange="bindChange"
indicator-style="height: 50px;" style="width: 100%; height: 300px;" 
>

  <picker-view-column>
    <view wx:for="{{provinces}}" wx:key="{{provinces}}" style="line-height: 50px; text-align: center;">{{item.name}}</view>
  </picker-view-column>
  <picker-view-column>
    <view wx:for="{{cities}}" wx:key="{{cities}}" style="line-height: 50px; text-align: center;">{{item.name}}</view>
  </picker-view-column>

</picker-view>

js代码

借助observers ，监听 provincecode的变化，实现cities的更新。

Page({
  data: {
    provinces: [],
    cities: [],
    value: [0, 0],
    provinceCode: 0
  },
  onLoad() {
    var provinces = getProvinces();
    var cities = getCities(provinces[0].code);
    this.setData({
      provinces: provinces,
      cities: cities
    });
  },
  bindChange(e) {
    const value = e.detail.value;
    const province = this.data.provinces[value[0]];
    this.setData({
        provinceCode: province.code
    });
  },
  behaviors:[Behavior(
    {
        observers:{
            'provinceCode':function(provinceCode){
                debounce(() => {
                // 加载城市
                const cities = getCities(province.code);
                this.setData({
                   provinceCode: provinceCode,
                   cities
                 });
                }, 3000);
            }
        }

    })
  ],
})

function getProvinces() {
  const provinces = [{
      name: '上海市',
      code: '0001'
    },
    {
      name: '江苏省',
      code: '0002'
    }
  ];
  return provinces;
}

function getCities(provinceCode) {

  if (provinceCode === '0001') {
    return [{
      name: '上海市',
      code: '10001'
    }]
  } else {
    return [{
        name: '南京市',
        code: '10002'
      },
      {
        name: '连云港市',
        code: '10003'
      }
    ]
  }
}

let timeout = null;
function debounce(func, time) {
  clearTimeout(timeout);
  timeout = setTimeout(func, time)
}