index.wxml
picker中的 mode=region模式,这里同element中的select不同的是,不需要自己在绑定数据原,默认就包含了省市区的整体数据
<view class="section"><view class="section__title">省市区选择器</view><picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}"><view class="picker">当前选择:{{region[0]}},{{region[1]}},{{region[2]}}</view></picker>
</view>
index.js
// pages/temp/index.js
Page({/*** 页面的初始数据*/data: {region:[]},/*** 生命周期函数--监听页面加载*/onLoad(options) {},bindRegionChange(e){this.setData({region : e.detail.value})},})
下图是选择时打印e的结果
字段的解释如下
在微信小程序中,当用户在省市区选择器中进行选择后,会触发一个change事件,事件对象中包含了一些属性,其中的参数含义如下:
1.currentTarget: 表示当前触发事件的组件,包含了组件的一些属性信息,比如id、offsetLeft(相对于视口的左边距)、offsetTop(相对于视口的上边距)等。
2.detail: 表示事件对象的详细信息,包含了用户选择的数据以及其他相关信息。
3.code: 表示省市区的代码,是一个数组,依次代表省、市、区的代码。
4.postcode: 表示邮政编码,即所选地区的邮政编码。
5.value: 表示用户选择的省市区名称,也是一个数组,依次代表省、市、区的名称。
6.mark: 一个空对象,可能用于存储一些额外的标记信息。
7.mut: 一个布尔值,表示是否已经处理过该事件。
8.target: 事件的真正触发目标,与currentTarget可能不同。
9.timeStamp: 事件触发的时间戳。
10.type: 事件类型,即"change"。
11._userTap: 一个布尔值,表示用户是否触发了该事件。