android四级联动机制,小程序四级联动（wepy）

由于 github 上没有基于wepy的4级联动组件，基本上都是原生小程序的写法，我自己改写成了基于wepy的四级联动组件。目的是帮助使用wepy的朋友节省一些时间,毕竟我自己没有找到wepy版本的四级联动组件。下面的代码直接复制到wepy项目中运行即可，代码逻辑很简单，看一下注释基本就理解了，我就不啰嗦了。

请选择

{{multiArray[0][multiIndex[0]]}} {{multiArray[1][multiIndex[1]]}} {{multiArray[2][multiIndex[2]]}}{{multiArray[3][multiIndex[3]]}}

var app = getApp()

import wepy from 'wepy';

import tip from '@/utils/tips';

import city from '@/utils/city';

import api from '@/utils/api';

import {

goUrl

} from '@/utils/global';

export default class Index extends wepy.page {

methods = {}

async onLoad() {

this.getProvince() // 页面加载后就调用函数 获取省级数据

};

data = {

provinceArr: null, //省名称数组

provinceList: null, //省数组

currnetProvinceKey: 0, //当前省下标

cityArr: null, //城市名称数组

cityList: null, //城市数组

currnetCityKey: 0, //当前城市下标

storeArr: null, //

storeList: null, //

currnetStoreKey: 0,

streetArr: null, //

streetList: null, //

multiArray: [], // 三维数组数据

multiIndex: [0, 0, 0, 0], // 默认的下标

step: 0, // 默认显示请选择

}

getProvince() { // 获取省

//ajax请求

let data = [{

key: '3200',

value: '江苏',

selected: null,

exKey: null,

unionField: null,

},

{

key: '3200',

value: '江苏2',

selected: null,

exKey: null,

unionField: null,

},

{

key: '32003',

value: '江苏',

selected: null,

exKey: null,

unionField: null,

}

]

var provinceList = data // 放在一个数组里面

var provinceArr = data.map((item) => {

return item.value

}) // 获取数据里面的value值，就是只用数据的名称

this.multiArray = [provinceArr, [],

[]

] // 更新三维数组 更新后长这样 [['江苏省', '福建省'],[],[]]

this.provinceList = provinceList // 省级原始数据

this.provinceArr = provinceArr // 省级所有的名称

var defaultCode = this.provinceList[0].key // 使用第一项当作参数获取市级数据

if (defaultCode) {

this.currnetProvinceKey = defaultCode // 保存在当前的省级key

this.getCity(defaultCode) // 获取市级数据

}

}

getCity(code) { // 获取市级数据

this.currnetProvinceKey = code // 保存当前选择的市级code

//用code去请求

let data = [{

key: '3200',

value: '市区1',

selected: null,

exKey: null,

unionField: null,

},

{

key: '3200',

value: '市区2',

selected: null,

exKey: null,

unionField: null,

},

{

key: '32003',

value: '市区3',

selected: null,

exKey: null,

unionField: null,

}

]

var cityArr = data.map((item) => {

return item.value

})

var cityList = data

this.multiArray = [this.provinceArr, this.cityArr, []] // 更新三维数组 更新后长这样 [['江苏省', '福建省'], ['徐州市'], []]

this.cityList = cityList // 保存下市级原始数据

this.cityArr = cityArr // 市级所有的名称

var defaultCode = cityList[0].key // 用第一个获取市数据

if (defaultCode) {

this.currnetCityKey = defaultCode // 存下当前选择的城市key

this.getStore(defaultCode) // 获取市数据

}

}

getStore(code) {

this.currnetCityKey = code // 更新当前选择的市级key

let data = [{

key: '3200',

value: '南山区1',

selected: null,

exKey: null,

unionField: null,

},

{

key: '3200',

value: '南山区2',

selected: null,

exKey: null,

unionField: null,

},

{

key: '32003',

value: '南山区1',

selected: null,

exKey: null,

unionField: null,

}

]

var storeList = data

var storeArr = data.map((item) => {

return item.value

})

this.multiArray = [this.provinceArr, this.cityArr, storeArr]

this.storeList = storeList

this.storeArr = storeArr

var defaultCode = storeList[0].key

if (defaultCode) {

this.currnetStoreKey = defaultCode // 存下当前选择的城市key

this.street(defaultCode)

}

}

street(code) {

this.currnetStoreKey = code // 更新当前选择的市级key

let data = [{

key: '3200',

value: '街道1',

selected: null,

exKey: null,

unionField: null,

},

{

key: '3200',

value: '街道2',

selected: null,

exKey: null,

unionField: null,

},

{

key: '32003',

value: '街道3',

selected: null,

exKey: null,

unionField: null,

}

]

var streetList = data

var streetArr = data.map((item) => {

return item.value

})

this.multiArray = [this.provinceArr, this.cityArr, this.storeArr, streetArr]

this.streetList = streetList

this.streetArr = streetArr

}

columnchange(e) { // 滚动选择器 触发的事件

var column = e.detail.column // 当前改变的列

var data = {

multiIndex: JSON.parse(JSON.stringify(this.multiIndex)),

multiArray: JSON.parse(JSON.stringify(this.multiArray))

}

this.multiIndex[column] = e.detail.value; // 第几列改变了就是对应multiIndex的第几个，更新它

switch (column) { // 处理不同的逻辑

case 0: // 第一列更改 就是省级的更改

var currentProvinceKey = this.provinceList[e.detail.value].key

if (currentProvinceKey != this.currnetProvinceKey) { // 判断当前的key是不是真正的更新了

this.getCity(currentProvinceKey) // 获取当前key下面的市级数据

}

this.multiIndex[1] = 0 // 将市默认选择第一个

break;

case 1: // 市发生变化

var currentCitykey = this.cityList[e.detail.value].key

if (currentCitykey != this.currnetCityKey) {

this.getStore(currentCitykey)

}

data.multiIndex[2] = 0

break;

}

this.setData(data) // 更新数据

}

pickchange(e) {

this.step = 1,

this.multiIndex = e.detail.value // 更新下标字段

}

submit() {

var storeCode = this.storeList[this.multiIndex.length - 1].key

}

events = {};

async onShow() {};

}