运城做网站,花垣县建设局网站,微商软件商城24小时,wordpress 404页面模板1.第一步 传parentId0 查询省份
2.第二步 选择省份,传pathId选择省份的pathId, 不传parentId,会查询出 市/县数据
3.第三步 根据选择县的parentId 查询街道数据,传parentId选择的县id
4.选择结果回显 显示所选择的 path 以/分割 取最后一级van-dropdown-menu…
1.第一步 传parentId0 查询省份
2.第二步 选择省份,传pathId选择省份的pathId, 不传parentId,会查询出 市/县数据
3.第三步 根据选择县的parentId 查询街道数据,传parentId选择的县id
4.选择结果回显 显示所选择的 path 以/分割 取最后一级van-dropdown-menu active-color#409eff custom-classfilter-menusvan-dropdown-item idareaAll title区域选择view classareaBox styleheight:288rpx; overflow:auto;van-cell classvan-dropdown-item__option dropdown-time {{item.id parentId ? time-active : }} wx:for{{areaAllList}} wx:keyindex data-item{{item}} bindtapareaClickview classvan-cellview classvan-dropdown-item__title{{item.name}}/view/view/van-cell/viewviewvan-picker show-toolbar columns{{columns}} value-keyname bind:changechgArea bind:confirmconfirmArea bind:cancelareaClose //view/van-dropdown-item/van-dropdown-menuPage({data: {//行政区域areaAllList: [],columns: [// {// values: , // one, //可以是数组或者对象数组// className: column1 //选择器的第一列// },// {// values: , // two[one[0].name], //默认选中two对象中的第一项// className: column2, //选择器的第二列// },// {// values: , // three[two[one[0].name][0].name], //默认选中three对象中的第一项// className: column3, //选择器的第三列// }],one: [],two: []}})onLoad(options) {//行政区划 areaAllListthis.getParent() //
},
method:{areaClick(e) {//点击省, 请求市级的数据const item e.currentTarget.dataset.itemthis.setData({parentId: item.id})this.initPath(item.pathId)},getParent() {//获取顶部的省级fetch.apply.getAreaAll({parentId: 0}, res {if (res.flag 0) {this.setData({areaAllList: res.object})}})},initPath(pathId) {// 1写入 选择器第一级 数据 ; 2将二级数据, 做成 columns 的格式,并写入fetch.apply.getAreaAll({pathId: pathId}, res {if (res.flag 0 res.object.length 0) {var v1 []res.object.forEach((e, i) {v1[e.name] e.childs});this.setData({one: res.object,two: v1,})this.setData({columns: [{values: this.data.one, //可以是数组或者对象数组className: column1, //选择器的第一列},{values: this.data.two[this.data.one[0].name], //默认选中two对象中的第一项className: column2, //选择器的第二列defaultIndex: 0},{values: , // this.data.three[this.data.two[this.data.one[0].name][0].name], //默认选中three对象中的第一项className: column3, //选择器的第三列}],})} else {this.setData({one: ,two: ,columns: []})}})},confirmArea(event) {// 确定 选择的地区数据let value event.detail.valueif (!value[0]) {toast(请选择城市)return}if (!value[2]) {//将选中的文字和对应的id拿出来使用// wx.showModal({// title: ,// content: 您选中了“ value[0].name , value[1].name , // ”, di为“ value[0].id , value[1].id // , ”,// showCancel: false// })this.setData({areaPathId: value[1].id})} else {//将选中的文字和对应的id拿出来使用// wx.showModal({// title: ,// content: 您选中了“ value[0].name , value[1].name , // value[2].name ”, di为“ value[0].id , value[1].id // , value[2].id ”,// showCancel: false// })this.setData({areaPathId: value[2].id})}this.getList()this.areaClose()},chgArea(event) {// 滚动选择器, 通过第二级,获取最后一级, 街道数据let picker event.detail.pickerlet value event.detail.valuelet index event.detail.index//在change 第一列的时候动态更改第二列的数据//setColumnValues是vant自带的实例方法//第一个参数是列数从0开始第二个参数是第二列应该显示的数据picker.setColumnValues(1, this.data.two[value[0].name])//此处vant-picker有一个bug当只滑动第一级时返回的value数据是错误的需要我们自己根据第二 级计算去获取第三级数据if (index 0) {// picker.setColumnValues(2, this.data.three[(this.data.two[value[0].name][0]).name])} else if (index 1) {var v2 {}fetch.apply.getAreaAll({parentId: value[index].id}, res {if (res.flag 0) {v2[value[index].name] res.objectthis.setData({three: v2})picker.setColumnValues(2, this.data.three[value[1].name])}})} else {picker.setColumnValues(2, this.data.three[value[1].name])}},areaClose() {this.selectComponent(#areaAll).toggle()},
}技术要点
1 按照固定格式, 设置columns 的数据 2 picker.setColumnValues() 方法,获取数据
columns 的数据 格式
var one [{ id: 111, name: 杭州 },{ id: 222, name: 宁波 },
]
var two {杭州: [{ id: 11100, name: 国杭州 },{ id: 22201, name: 国宁波 },],宁波: [{ id: 11102, name: 中杭州 },{ id: 22203, name: 中宁波 },{ id: 33304, name: 中温州 },]
}
var three {国杭州: [{ id: 1110000, name: aaa },{ id: 2220101, name: bbb },],国宁波: [{ id: 1110102, name: ccc },{ id: 2220103, name: ddd },{ id: 3330104, name: eee },],中杭州: [{ id: 1110205, name: fff },{ id: 2220206, name: ggg },{ id: 3330207, name: hhh },],中宁波: [{ id: 1110308, name: www },{ id: 2220309, name: ttt },{ id: 3330310, name: yyy },],中温州: [{ id: 1110411, name: jjj },{ id: 2220412, name: kkk },{ id: 3330413, name: ppp },]
}
