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

简介

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

实现效果

实现代码

布局
html 复制代码
<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代码
javascript 复制代码
Page({
  data: {
    provinces: [],
    cities: [],
    value: [0, 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]];
    if (province.code !== this.data.provinceCode) { // 省份改变
      this.setData( // 设置省份状态
        {
          provinceCode: province.code
        }
      )
      const that = this;
      debounce(() => {
        // 加载城市
        const cities = getCities(province.code);
        that.setData({
          provinceCode: province.code,
          cities
        });
      }, 3000);
      return;
    }

  }
})

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)
}
相关推荐
中云DDoS CC防护蔡蔡5 小时前
微信小程序被攻击怎么选择高防产品
服务器·网络安全·微信小程序·小程序·ddos
井眼9 小时前
微信小程序-prettier 格式化
微信小程序·小程序
qq_174482857511 小时前
springboot基于微信小程序的旧衣回收系统的设计与实现
spring boot·后端·微信小程序
wqq_99225027711 小时前
springboot基于微信小程序的食堂预约点餐系统
数据库·微信小程序·小程序
licy__18 小时前
微信小程序登录注册页面设计(小程序项目)
微信小程序·小程序
wqq_9922502771 天前
springboot基于微信小程序的农产品交易平台
spring boot·后端·微信小程序
guanpinkeji2 天前
二手手机回收小程序,一键便捷高效回收
微信小程序·小程序·软件开发·手机回收小程序·二手手机回收
尘浮生2 天前
Java项目实战II基于微信小程序的私家车位共享系统(开发文档+数据库+源码)
java·开发语言·数据库·学习·微信小程序·小程序·maven
十幺卜入2 天前
基于xr-frame实现微信小程序的手部、手势识别3D模型叠加和石头剪刀布游戏功能
游戏·微信小程序·xr·手势识别·人手跟踪
坠入暮云间x2 天前
Nodejs开发仿马蜂窝旅游小程序API接口,服务器端开发,商家后台 Vue3+微信小程序+koa+mongodb+node.js
微信小程序·小程序·旅游