由于 github 上沒有基于wepy的4級聯(lián)動組件，基本上都是原生小程序的寫法蜈缤，我自己改寫成了基于wepy的四級聯(lián)動組件坞古。目的是幫助使用wepy的朋友節(jié)省一些時(shí)間,畢竟我自己沒有找到wepy版本的四級聯(lián)動組件。下面的代碼直接復(fù)制到wepy項(xiàng)目中運(yùn)行即可劫樟，代碼邏輯很簡單，看一下注釋基本就理解了织堂，我就不啰嗦了叠艳。
<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() // 頁面加載后就調(diào)用函數(shù) 獲取省級數(shù)據(jù)
};
data = {
provinceArr: null, //省名稱數(shù)組
provinceList: null, //省數(shù)組
currnetProvinceKey: 0, //當(dāng)前省下標(biāo)
cityArr: null, //城市名稱數(shù)組
cityList: null, //城市數(shù)組
currnetCityKey: 0, //當(dāng)前城市下標(biāo)
storeArr: null, //
storeList: null, //
currnetStoreKey: 0,
streetArr: null, //
streetList: null, //
multiArray: [], // 三維數(shù)組數(shù)據(jù)
multiIndex: [0, 0, 0, 0], // 默認(rèn)的下標(biāo)
step: 0, // 默認(rèn)顯示請選擇
}
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 // 放在一個(gè)數(shù)組里面
var provinceArr = data.map((item) => {
return item.value
}) // 獲取數(shù)據(jù)里面的value值，就是只用數(shù)據(jù)的名稱
this.multiArray = [provinceArr, [],
[]
] // 更新三維數(shù)組 更新后長這樣 [['江蘇省', '福建省'],[],[]]
this.provinceList = provinceList // 省級原始數(shù)據(jù)
this.provinceArr = provinceArr // 省級所有的名稱
var defaultCode = this.provinceList[0].key // 使用第一項(xiàng)當(dāng)作參數(shù)獲取市級數(shù)據(jù)
if (defaultCode) {
this.currnetProvinceKey = defaultCode // 保存在當(dāng)前的省級key
this.getCity(defaultCode) // 獲取市級數(shù)據(jù)
}
}
getCity(code) { // 獲取市級數(shù)據(jù)
this.currnetProvinceKey = code // 保存當(dāng)前選擇的市級code
//用code去請求
let data = [{
key: '3200',
value: '市區(qū)1',
selected: null,
exKey: null,
unionField: null,
},
{
key: '3200',
value: '市區(qū)2',
selected: null,
exKey: null,
unionField: null,
},
{
key: '32003',
value: '市區(qū)3',
selected: null,
exKey: null,
unionField: null,
}
]
var cityArr = data.map((item) => {
return item.value
})
var cityList = data
this.multiArray = [this.provinceArr, this.cityArr, []] // 更新三維數(shù)組 更新后長這樣 [['江蘇省', '福建省'], ['徐州市'], []]
this.cityList = cityList // 保存下市級原始數(shù)據(jù)
this.cityArr = cityArr // 市級所有的名稱
var defaultCode = cityList[0].key // 用第一個(gè)獲取市數(shù)據(jù)
if (defaultCode) {
this.currnetCityKey = defaultCode // 存下當(dāng)前選擇的城市key
this.getStore(defaultCode) // 獲取市數(shù)據(jù)
}
}
getStore(code) {
this.currnetCityKey = code // 更新當(dāng)前選擇的市級key
let data = [{
key: '3200',
value: '南山區(qū)1',
selected: null,
exKey: null,
unionField: null,
},
{
key: '3200',
value: '南山區(qū)2',
selected: null,
exKey: null,
unionField: null,
},
{
key: '32003',
value: '南山區(qū)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 // 存下當(dāng)前選擇的城市key
this.street(defaultCode)
}
}
street(code) {
this.currnetStoreKey = code // 更新當(dāng)前選擇的市級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) { // 滾動選擇器 觸發(fā)的事件
var column = e.detail.column // 當(dāng)前改變的列
var data = {
multiIndex: JSON.parse(JSON.stringify(this.multiIndex)),
multiArray: JSON.parse(JSON.stringify(this.multiArray))
}
this.multiIndex[column] = e.detail.value; // 第幾列改變了就是對應(yīng)multiIndex的第幾個(gè)易阳，更新它
switch (column) { // 處理不同的邏輯
case 0: // 第一列更改 就是省級的更改
var currentProvinceKey = this.provinceList[e.detail.value].key
if (currentProvinceKey != this.currnetProvinceKey) { // 判斷當(dāng)前的key是不是真正的更新了
this.getCity(currentProvinceKey) // 獲取當(dāng)前key下面的市級數(shù)據(jù)
}
this.multiIndex[1] = 0 // 將市默認(rèn)選擇第一個(gè)
break;
case 1: // 市發(fā)生變化
var currentCitykey = this.cityList[e.detail.value].key
if (currentCitykey != this.currnetCityKey) {
this.getStore(currentCitykey)
}
data.multiIndex[2] = 0
break;
}
this.setData(data) // 更新數(shù)據(jù)
}
pickchange(e) {
this.step = 1,
this.multiIndex = e.detail.value // 更新下標(biāo)字段
}
submit() {
var storeCode = this.storeList[this.multiIndex.length - 1].key
}
events = {};
async onShow() {};
}
</script>