每个周五的下午，坐在电脑边，沏上一杯热茶，按捺不住激动的心情，为了周末的休息不上班吗？不，安静的环境是为了能够更好的学习！ ! !
Удобный сборщик
с помощьюpickerКомпонент может легко помочь нам реализовать селекторы провинции, города, даты и времени, а также многостолбцовые селекторы.Далее давайте реализуем многостолбцовый селектор для динамических данных.
визуализация
Первый на карте эффектов
взаимодействовать
Сначала пользователь нажимает кнопку, чтобы выбрать магазин для покупки автомобилей, выбирает регион на уровне провинции, а затем использует выбранный ключ уровня провинции в качестве условия запроса для получения данных на уровне города, а затем использует выбранный ключ уровня города. для запроса данных хранилища.
структура данных
Структура данных, предоставленная бэкенд-приятелями, одинакова, она выглядит так
Мы используем каждую часть данныхvalueотображать, использоватьkeyсделать запрос, и наконец получить выбранный магазинkey, а затем бросьте back-end buddy, чтобы сохранить его.
wxml
Давай, давай, следуй за моим ритмом, дай мне увидеть твои руки, эй, я не давал тебе играть ритм, просто набери код 🤗️🤗️
<picker mode="multiSelector" range="{{multiArray}}" bindcolumnchange="columnchange" value="{{multiIndex}}" bindchange='pickchange'>
<view class='right' wx:if="{{multiArray[2][multiIndex[2]] && step == 0}}">
<text>请选择</text>
</view>
<view class="picker" wx:if="{{multiArray[2][multiIndex[2]] && step == 1}}">
<text>{{multiArray[2][multiIndex[2]]}}</text>
</view>
</picker>
Старые правила, скажите, что делает приведенный выше код
1. Компонент выбора используется для создания селектора прокрутки, который появляется снизу.
2,mode="multiSelector"Используется для объявления создания многоколоночного селектора.
3.range="{{multiArray}}" multiArrayнаш многомерный массив, на этот раз мы будем использовать для размещения всех имен данных
4.value="{{multiIndex}}" multiIndexЭто также массив, который используется для представления номера каждого элемента выбранного многомерного массива.
5.bindchangeсобытие, вызванное изменением значения,bindcolumnchangeСобытие запускается при изменении значения каждого столбца
Если вам нужно идеальное объяснение, пожалуйста, нажмите 👇Полный API
два друга
bindcolumnchange
Как упоминалось выше, bindcolumnchange используется для привязки событий, которые запускаются при изменении значения каждого столбца.Он высокий и могучий.
columnchange(e){
console.log(e.detail) // {column: 2, value: 1}
switch (e.detail.column) { // 此时的改变列数
case 0:
// 处理逻辑
break;
case 1:
// 处理逻辑
break;
}
this.setData({
// 更新数据
})
}
Значение столбца указывает, какой столбец был изменен (нижний индекс начинается с 0), а значение значения указывает нижний индекс измененного значения.
bindchange
bindchange используется для привязки событий, вызванных изменением значения, он очень красивый
pickchange(e){ // picker发送选择改变时候触发 通过e.detail.value获取携带的值
console.log(e.detail.value) // [0,1,2]
this.setData({
multiIndex: e.detail.value // 直接更新即可
})
}
логика
Познакомившись с двумя друзьями выше, давайте разберемся в своих мыслях, а затем переместим кирпичи, чтобы построить дом. Реализация условно делится на следующие этапы:
1. Загрузите данные по провинциям и поместите их вmultiArrayВнутри храните исходные данные и используйте первые данныеkeyЗапросите данные на уровне города и сделайте то же самое после получения данных на уровне города.То же самое верно для магазинов.
2. Пишитеcolumnchangeа такжеpickchangeФункция для обработки действия при изменении селектора
3. После загрузки страницы вызовите функцию для получения данных о провинциях, эта функция сама получит город и сохранит данные.
Если вы не понимаете вышесказанное, вы можете объединить окончательный код, чтобы понять
полный код
var app = getApp()
Page({
data: {
multiArray:[], // 三维数组数据
multiIndex:[0, 0, 0], // 默认的下标
step:0, // 默认显示请选择
},
onLoad: function (options) {
this.getProvince() // 页面加载后就调用函数 获取省级数据
},
getProvince(){ // 获取省
app.Util.ajax('/gw/app/saler/store/province_list', '', 'post').then((data) => {
var provinceList = [...data] // 放在一个数组里面
var provinceArr = data.map((item) => { return item.value }) // 获取数据里面的value值，就是只用数据的名称
this.setData({
multiArray: [provinceArr, [], []], // 更新三维数组 更新后长这样 [['江苏省', '福建省'],[],[]]
provinceList, // 省级原始数据
provinceArr // 省级所有的名称
})
var defaultCode = this.data.provinceList[0].key // 使用第一项当作参数获取市级数据
if (defaultCode){
this.setData({
currnetProvinceKey: defaultCode // 保存在当前的省级key
})
this.getCity(defaultCode) // 获取市级数据
}
})
},
getCity(code){ // 获取市级数据
this.setData({
currnetProvinceKey: code // 保存当前选择的市级code
})
app.Util.ajax('/gw/app/saler/store/city_list', { provinceCode: code }, 'post', { 'content-type': 'application/x-www-form-urlencoded' }).then((data) => {
var cityArr = data.map((item) => { return item.value })
var cityList = [...data]
this.setData({
multiArray: [this.data.provinceArr, cityArr, []], // 更新三维数组 更新后长这样 [['江苏省', '福建省'], ['徐州市'], []]
cityList, // 保存下市级原始数据
cityArr // 市级所有的名称
})
var defaultCode = this.data.cityList[0].key // 用第一个获取门店数据
if (defaultCode){
this.setData({
currnetCityKey: defaultCode // 存下当前选择的城市key
})
this.getStore(defaultCode) // 获取门店数据
}
})
},
getStore(code){
this.setData({
currnetCityKey: code // 更新当前选择的市级key
})
app.Util.ajax('/gw/app/saler/store/store_list', { cityCode: code }, 'post', { 'content-type': 'application/x-www-form-urlencoded' }).then((data) => {
var storeList = [...data]
var storeArr = data.map((item) => { return item.value})
this.setData({
multiArray: [this.data.provinceArr, this.data.cityArr, storeArr], // 重新赋值三级数组 此时的数组大概是这样 [['江苏省', '福建省'], ['徐州市'], ['徐州第一门店','徐州第二门店']]
storeList, // 保存下门店原始数据
storeArr // 保存下门店名称，可以不保存
})
})
},
columnchange(e){ // 滚动选择器 触发的事件
var column = e.detail.column // 当前改变的列
var data = {
multiIndex: JSON.parse(JSON.stringify(this.data.multiIndex)),
multiArray: JSON.parse(JSON.stringify(this.data.multiArray))
}
data.multiIndex[column] = e.detail.value; // 第几列改变了就是对应multiIndex的第几个，更新它
switch(column){ // 处理不同的逻辑
case 0: // 第一列更改 就是省级的更改
var currentProvinceKey = this.data.provinceList[e.detail.value].key
if (currentProvinceKey != this.data.currnetProvinceKey){ // 判断当前的key是不是真正的更新了
this.getCity(currentProvinceKey) // 获取当前key下面的市级数据
}
data.multiIndex[1] = 0 // 将市默认选择第一个
break;
case 1: // 市发生变化
var currentCitykey = this.data.cityList[e.detail.value].key
if (currentCitykey != this.data.currnetCityKey){ // 同样判断
this.getStore(currentCitykey) // 获取门店
}
data.multiIndex[2] = 0 // 门店默认为第一个
break;
}
this.setData(data) // 更新数据
},
pickchange(e){
this.setData({
step: 1, // 更新，用来选择用户选中的门店
multiIndex: e.detail.value // 更新下标字段
})
},
submit(){ // 保存的时候 获取当前选择门店的key 丢给后端开发即可
var storeCode = this.data.storeList[this.data.multiIndex.length - 1].key
}
})
Суммировать
1. Использовать компонент выбора для реализации многоколоночного селектора очень просто.Нам нужно только поместить логику обработки в высокий и могучий bindcolumnchange.
2. Вы можете инкапсулировать некоторые публичные функции в файл Util, например, в него помещается ajax приведенного выше кода.
3. Я еще не думал об этом, составь количество слов.