1. 创建自定义组件：
在小程序的 components 目录下创建一个名为 CityPicker 的文件夹，并在该文件夹下创建以下文件：
- CityPicker.wxml：城市选择器的模板文件。
- CityPicker.wxss：城市选择器的样式文件。
- CityPicker.js：城市选择器的逻辑文件。
- CityPicker.json：城市选择器的配置文件。
<!-- CityPicker.wxml -->
<view class="city-picker">
<picker mode="selector" range="{{cityList}}" bindchange="cityChange">
<view class="picker">
{{selectedCity}}
</view>
</picker>
<!-- 其他输入字段 -->
</view>
/* CityPicker.wxss */
.city-picker {
/* 样式设置 */
}
.picker {
/* 选择器样式设置 */
}
// CityPicker.js
Component({
properties: {
// 可以定义组件的属性
},
data: {
cityList: ['北京', '上海', '广州', '深圳', '成都', '重庆', '杭州'],
selectedCity: '北京',
},
methods: {
cityChange: function (e) {
const selectedCity = this.data.cityList[e.detail.value];
this.setData({
selectedCity: selectedCity,
});
},
// 其他方法
},
});
// CityPicker.json
{
"component": true,
"usingComponents": {}
}
2. 在页面中使用自定义组件：
在需要使用城市服务快速填写组件的页面中引入并使用自定义组件。
<!-- page.wxml -->
<view>
<city-picker></city-picker>
<!-- 其他页面内容 -->
</view>
// page.js
Page({
// 页面逻辑
});
这只是一个简单的示例，实际的城市服务快速填写组件可能需要更多的输入字段和逻辑。根据你的业务需求，你可以在自定义组件中添加更多的功能，比如查询天气、交通信息等。确保你的组件设计合理，并提供友好的用户体验。
转载请注明出处：http://www.pingtaimeng.com/article/detail/753/微信小程序