miniprogram picker
Release 1.0.7
bindcolumnchange , чтобы вручную изменить значения range и value для завершения изменения связи Picker. довольно хлопотно и не способствует дублированию использования различной бизнес-логики.sourceData фиксированную структуру данных и выполнить некоторые необходимые настройки. Этот компонент может автоматически помочь разработчикам обрабатывать логику связи.2.2.1 или выше, а также开发者工具1.02.1808300 или выше, мини-программа поддерживает использование npm для установки сторонних пакетов. 
| свойство | иллюстрировать | тип | значение по умолчанию | Требуется ли это? |
|---|---|---|---|---|
| исходные данные | Исходный массив, sourceData имеет несколько измерений, а Picker может иметь несколько уровней. Формат должен представлять собой коллекцию массивов и объектов, см. пример. | Множество | [] | истинный |
| шаги | Заказ комплектовщика | Число | 1 | ЛОЖЬ |
| показаноFieldName | Имя поля для отображения данных | Нить | 'имя' | ЛОЖЬ |
| имя_подмножестваFieldName | Имя поля дочернего узла. Значением этого поля является массив Picker следующего уровня. | Нить | 'подмножество' | ЛОЖЬ |
| ДругоеNeedFieldsName | Разработчики могут настроить другие поля, которые необходимо вернуть, в соответствии со своими потребностями. | Множество | [] | ЛОЖЬ |
| defaultIndex | Массив индексов выбранных по умолчанию элементов, имеющий приоритет над defaultValue. | Множество | [] | ЛОЖЬ |
| значение по умолчанию | Массив значений выбранного по умолчанию элемента. Если этот атрибут включен, defaultValueUniqueField является обязательным. | Множество | [] | ЛОЖЬ |
| defaultValueUniqueField | Единственное поле массива значений выбранного по умолчанию элемента, используемое для сравнения с исходным массивом. | Нить | '' | - |
| автовыбор | Нужно ли во время инициализации автоматически вызывать событиеbindchange, чтобы вернуть результаты разработчику? | логическое значение | ЛОЖЬ | ЛОЖЬ |
| initColumnSelectedIndex | После выбора n-го столбца, будет ли выбранное значение столбца больше n автоматически инициализироваться равным 0 | логическое значение | ЛОЖЬ | ЛОЖЬ |
| неполноценный | Стоит ли отключать | логическое значение | ЛОЖЬ | ЛОЖЬ |
| метод | иллюстрировать | тип | объект события |
|---|---|---|---|
| связывание | Срабатывает, когда пользователь нажимает кнопку подтверждения | Дескриптор события | event.detail = {selectedIndex, selectedArray} |
| связываниеотмена | Срабатывает, когда пользователь нажимает кнопку "Отмена" | Дескриптор события | event.detail — это объект события, когда срабатывает привязка собственного компонента. |
| привязка столбца | Срабатывает, когда значение столбца изменяется, когда пользователь его перемещает. | Дескриптор события | event.detail — это объект события, когда запускается связывание столбца собственного компонента. |
sourceData — это исходный массив, который представляет собой набор структур объектов массива. sourceData имеет несколько измерений, а Picker может иметь несколько уровней.steps , вам необходимо явно указать порядок выбора. Например, для трехуровневой связи установите steps: 3 .steps установлено значение 3 , sourceData должен соответствовать этому порядку.initColumnSelectedIndex инструмент отладки разработчика выйдет из строя. Однако на реальной машине пока не обнаружено никаких проблем, поэтому разработчик должен решить, включать его или нет.bindchange :selectedIndex : Массив индексов выбора Picker;selectedArray : Массив значений элементов выбора средства выбора;bindchange , bindcancel , bindcolumnchange , disabled . Вы можете проверить исходный код для получения подробной информации. Установите пакет miniprogram-picker .
Напоминание: если вы не хотите использовать npm, вы также можете напрямую загрузить последний релизный пакет и поместить его в
componentsпроекта, точно так же, как и при использовании компонентов, написанных самостоятельно, но npm более удобен.
npm install miniprogram-picker --production
// 或者
npm install miniprogram-picker --save Щелкните строку меню в инструментах разработчика WeChat: Инструменты -> Сборка npm. В это время вы обнаружите, что в проекте есть дополнительный каталог miniprogram_npm , который содержит скомпилированный miniprogram-picker .
Сторонний компонент miniprogram-picker введен в .json . Метод использования такой же, как и использование собственных инкапсулированных компонентов, за исключением того, что вам не нужно прописывать конкретный путь, что очень удобно.
{
"usingComponents" : {
"miniprogram-picker" : " miniprogram-picker "
}
} Используйте miniprogram-picker в .wxml . Я привожу здесь два небольших примера: первый — трехуровневая связь, а второй — двухуровневая связь. Конкретные атрибуты и методы событий см. в API.
miniprogram-pickerнет никакого стиля. Разработчики могут настроить определенный стиль. Было бы лучше, если бы вы знали, как использоватьslot. Подробности см. в разделе слота компонента мини-программы wxml.
< miniprogram-picker
sourceData = " {{sourceData_1}} "
steps = " {{3}} "
shownFieldName = " {{'name'}} "
subsetFieldName = " {{'sonValue'}} "
otherNeedFieldsName = " {{['id', 'other']}} "
defaultValue = " {{[{name: '2'}, {name: '2.2'}, {name: '2.2.1'}]}} "
defaultValueUniqueField = " {{'name'}} "
autoSelect = " {{true}} "
initColumnSelectedIndex
disabled = " {{false}} "
bindchange = " pickerChange "
bindcancel = " pickerCancel "
bindcolumnchange = " pickerColumnchange "
data-picker = " picker_1 " >
< view class = " picker " >
当前选择：< view wx : for = " {{result_1}} " wx : key = " index " >{{item['name']}}</ view >
</ view >
</ miniprogram-picker >
< miniprogram-picker
sourceData = " {{sourceData_2}} "
steps = " {{2}} "
shownFieldName = " {{'name'}} "
subsetFieldName = " {{'nextLevel'}} "
otherNeedFieldsName = " {{['code']}} "
defaultValue = " {{[{code: '0110'}, {code: '011002'}]}} "
defaultValueUniqueField = " {{'code'}} "
autoSelect = " {{true}} "
initColumnSelectedIndex
disabled = " {{false}} "
bindchange = " pickerChange "
bindcancel = " pickerCancel "
bindcolumnchange = " pickerColumnchange "
data-picker = " picker_2 " >
< view class = " picker " >
当前选择：< view wx : for = " {{result_2}} " wx : key = " index " >{{item['name']}}</ view >
</ view >
</ miniprogram-picker > Установите sourceData и прослушивайте события pickerChange в .js .
Page ( {
/**
* 页面的初始数据
*/
data : {
result_1 : [ ] ,
result_2 : [ ] ,
sourceData_1 : [
{
id : 'id-1' ,
name : '1' ,
sonValue : [
{
id : 'id-11' ,
name : '1.1' ,
sonValue : [
{ id : 'id-111' , name : '1.1.1' } ,
{ id : 'id-112' , name : '1.1.2' }
]
} ,
{
id : 'id-12' ,
name : '1.2' ,
sonValue : [
{ id : 'id-121' , name : '1.2.1' } ,
{ id : 'id-122' , name : '1.2.2' }
]
}
]
} ,
{
id : 'id-2' ,
name : '2' ,
sonValue : [
{
id : 'id-21' ,
name : '2.1' ,
sonValue : [
{ id : 'id-211' , name : '2.1.1' } ,
{ id : 'id-212' , name : '2.1.2' }
]
} ,
{
id : 'id-22' ,
name : '2.2' ,
sonValue : [
{ id : 'id-221' , name : '2.2.1' } ,
{ id : 'id-222' , name : '2.2.2' }
]
}
]
}
] ,
sourceData_2 : [
{ name : '河北' , code : '0311' , nextLevel : [ { name : '石家庄' , code : '031101' } , { name : '保定' , code : '031102' } ] } ,
{ name : '北京' , code : '0110' , nextLevel : [ { name : '朝阳' , code : '011001' } , { name : '海淀' , code : '011002' } ] } ,
]
} ,
/**
* Picker用户点击确认时触发
*
* @param {Object} e pickerChange的事件对象
* @param {Object} e.detail.selectedIndex 用户选择的数据在数组中所在的下标
* @param {Object} e.detail.selectedArray 用户选择的数据
*/
pickerChange ( e ) {
const { picker } = e . currentTarget . dataset
const { selectedIndex , selectedArray } = e . detail
const list = {
picker_1 : 'result_1' ,
picker_2 : 'result_2' ,
}
console . log ( '多级联动结果:' , selectedIndex , selectedArray )
const change = { }
change [ list [ picker ] ] = selectedArray
this . setData ( change )
} ,
/**
* Picker用户点击取消时触发
*
* @param {Object} e pickerCancel的事件对象
* @param {Object} e.detail 是原生Picker组件的bindcancel触发时的事件对象e
*/
pickerCancel ( e ) {
console . log ( e )
} ,
/**
* Picker用户滑动某一列的值改变时触发
*
* @param {Object} e pickerColumnchange的事件对象
* @param {Object} e.detail 是原生Picker组件的bindcolumnchange触发时的事件对象e
*/
pickerColumnchange ( e ) {
console . log ( e )
} ,
} ) Простая настройка стилей в .wxss .
. picker {
display : flex;
flex-direction : row;
align-items : center;
margin : 10 rpx 0 ;
padding : 10 rpx 0 ;
background-color : # DEECE2 ;
font-size : 28 rpx ;
}
. picker view {
padding : 2 rpx 10 rpx ;
margin-left : 10 rpx ;
margin-right : 10 rpx ;
border-bottom : 2 rpx solid aqua;
}
