由于 github 上没有基于wepy的4级联动组件，基本上都是原生小程序的写法，我自己改写成了基于wepy的四级联动组件。目的是帮助使用wepy的朋友节省一些时间,毕竟我自己没有找到wepy版本的四级联动组件。下面的代码直接复制到wepy项目中运行即可，代码逻辑很简单，看一下注释基本就理解了，我就不啰嗦了。
<template>
<picker mode="multiSelector" range="{{multiArray}}" bindcolumnchange="columnchange" value="{{multiIndex}}" bindchange='pickchange'>
<!-- <view class='right' wx:if="{{multiArray[2][multiIndex[2]] && step == 0}}"> -->
<view class='right'>
<text>请选择</text>
</view>
<!-- <view class="picker" wx:if="{{multiArray[2][multiIndex[2]] && step == 1}}"> -->
<view class="picker">
<text>{{multiArray[0][multiIndex[0]]}} {{multiArray[1][multiIndex[1]]}} {{multiArray[2][multiIndex[2]]}}{{multiArray[3][multiIndex[3]]}}</text>
</view>
</picker>
</template>
<script>
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() {};
}
</script>