如何用手机创建网站,浏览器网页游戏,启航做网站好吗,网站底部加编码简介
本文会基于微信小程序picker viewer组件实现省市选择器的功能。
实现效果 实现代码
布局
picker-view value{{value}} bindchangebindChange
indicator-styleheight: 50px; stylewidth: 100%; height: 300px;
picker-view value{{value}} bindchangebindChange
indicator-styleheight: 50px; stylewidth: 100%; height: 300px;
picker-view-columnview wx:for{{provinces}} wx:key{{provinces}} styleline-height: 50px; text-align: center;{{item.name}}/view/picker-view-columnpicker-view-columnview wx:for{{cities}} wx:key{{cities}} styleline-height: 50px; text-align: center;{{item.name}}/view/picker-view-column/picker-view
js代码
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)
}
