网站规划主要内容,h5制作软件 知乎,平面设计主要是干嘛的,个人怎样注册网站1.导入插件
先将uni-data-picker组件导入我们的HBuilder项目中#xff0c;在DCloud插件市场搜索uni-data-picker
点击下载插件并导入到我们的项目中 2.组件调用
curLocation #xff1a;获取到的当前位置#xff08;省市区#xff09;
uni-data-picker v-slot:defa…1.导入插件
先将uni-data-picker组件导入我们的HBuilder项目中在DCloud插件市场搜索uni-data-picker
点击下载插件并导入到我们的项目中 2.组件调用
curLocation 获取到的当前位置省市区
uni-data-picker v-slot:default{data, error, options} :localdatalocalData popup-title请选择省市区 changeonchange nodeclickonnodeclickview classselectedAddressview v-ifdata.length 0 curLocation{{ curLocation }}/viewview v-ifdata.length classselectedview v-for(item,index) in data :keyindex classselected-itemtext{{item.text}} /text /view/viewview classaddrlocationuni-icons typelocation color#ec4149 size24/uni-icons/view/view/uni-data-picker
data(){return {localData:[], //省市区地址curLocation: uni.getStorageSync(location_address),}
}
3.处理我们需要的省市区数据
1在https://gitee.com/dcloud/opendb下载省市区源数据collection/opendb-city-china 2下载后的数据是一组一维对象数组接下来把这个数组处理成树形结构 在页面中引入
const cityRows require(/common/opendb-master/collection/opendb-city-china/data.json)
// 省市区数据树生成get_city_tree () {let res []if (cityRows.length) {// 递归生成res this.handleTree(cityRows)}return res},handleTree (data, parent_code null) {let res []let keys {id: code,pid: parent_code,children: children,text: name,value: code}let oneItemDEMO {text: ,value: ,children: []}let oneItem {}// 循环for (let index in data) {// 判断if (parent_code null) {// 顶级菜单 - 省if (!data[index].hasOwnProperty( keys.pid ) || data[index][keys.pid] parent_code) {// 不存在parent_code或者已匹配oneItem JSON.parse(JSON.stringify(oneItemDEMO))oneItem.text data[index][keys.text]oneItem.value data[index][keys.value]// 递归下去oneItem.children this.handleTree(data, data[index][keys.id])res.push(oneItem)} } else {// 非顶级菜单 - 市、区、街道if (data[index].hasOwnProperty( keys.pid ) data[index][keys.pid] parent_code) {// 已匹配oneItem JSON.parse(JSON.stringify(oneItemDEMO))oneItem.text data[index][keys.text]oneItem.value data[index][keys.value]// 递归下去oneItem.children this.handleTree(data, data[index][keys.id])res.push(oneItem)}}}return res},
onLoad(options){this.localData this.get_city_tree()
}
最后的效果
