miniprogram picker
Release 1.0.7
bindcolumnchange untuk mengubah nilai range dan value secara manual untuk menyelesaikan perubahan tautan Picker Ini cukup merepotkan dan tidak kondusif untuk duplikasi dalam penggunaan logika bisnis yang berbeda.sourceData dengan struktur data tetap dan melakukan beberapa konfigurasi yang diperlukan. Komponen ini secara otomatis dapat membantu pengembang menangani logika tautan.2.2.1 atau lebih tinggi, dan开发者工具1.02.1808300 atau lebih tinggi, program mini mendukung penggunaan npm untuk menginstal paket pihak ketiga. 
| milik | menjelaskan | jenis | nilai bawaan | Apakah itu diperlukan? |
|---|---|---|---|---|
| sumberData | Array sumber, sourceData memiliki beberapa dimensi, dan Picker dapat memiliki beberapa level. Formatnya harus berupa kumpulan array dan objek, lihat contohnya | Himpunan | [] | BENAR |
| tangga | Perintah pemilih | Nomor | 1 | PALSU |
| ditampilkanNamaBidang | Nama bidang untuk menampilkan data | Rangkaian | 'nama' | PALSU |
| subsetNama Bidang | Nama bidang node anak. Nilai bidang ini adalah array tingkat berikutnya dari Picker. | Rangkaian | 'bagian' | PALSU |
| NamaNeedFieldsName lainnya | Pengembang dapat menyesuaikan bidang lain yang perlu dikembalikan sesuai dengan kebutuhannya. | Himpunan | [] | PALSU |
| defaultIndex | Array subskrip dari item yang dipilih secara default, lebih diutamakan daripada defaultValue | Himpunan | [] | PALSU |
| Nilai default | Array nilai dari item yang dipilih secara default. Jika atribut ini diaktifkan, defaultValueUniqueField diperlukan. | Himpunan | [] | PALSU |
| defaultValueUniqueField | Satu-satunya bidang larik nilai dari item yang dipilih secara default, digunakan untuk membandingkan dengan larik sumber | Rangkaian | '' | - |
| pilih otomatis | Selama inisialisasi, apakah perlu memanggil acara bindchange secara otomatis untuk mengembalikan hasilnya ke pengembang? | Boolean | PALSU | PALSU |
| initColumnSelectedIndex | Setelah kolom ke-n dipilih, apakah nilai kolom yang dipilih lebih besar dari n secara otomatis diinisialisasi ke 0 | Boolean | PALSU | PALSU |
| dengan disabilitas | Apakah akan menonaktifkan | Boolean | PALSU | PALSU |
| metode | menjelaskan | jenis | objek acara |
|---|---|---|---|
| bindchange | Dipicu ketika pengguna mengklik konfirmasi | Penanganan Acara | event.detail = {indeks terpilih, array terpilih} |
| mengikatbatalkan | Diaktifkan saat pengguna mengklik batal | Penanganan Acara | event.detail adalah objek acara ketika bindcancel komponen asli dipicu. |
| bindcolumnchange | Dipicu ketika nilai kolom berubah saat pengguna menggesernya | Penanganan Acara | event.detail adalah objek acara ketika perubahan bindcolumn dari komponen asli dipicu. |
sourceData adalah array sumber, yang merupakan kumpulan struktur objek array. sourceData memiliki beberapa dimensi, dan Picker dapat memiliki beberapa level.steps , Anda perlu menentukan urutan Picker secara eksplisit. Misalnya, untuk tautan tiga tingkat, tetapkan steps: 3 .steps diatur ke 3 , sourceData harus memenuhi urutan ini.initColumnSelectedIndex diaktifkan, alat debugging pengembang akan gagal. Namun, sejauh ini tidak ada masalah yang ditemukan pada mesin sebenarnya, jadi terserah pada pengembang untuk memutuskan apakah akan mengaktifkannya atau tidak.bindchange :selectedIndex : Indeks susunan pilihan Picker;selectedArray : Nilai array dari item pilihan Picker;bindchange , bindcancel , bindcolumnchange , disabled . Anda dapat memeriksa kode sumber untuk detailnya. Instal paket miniprogram-picker .
Pengingat: Jika tidak ingin menggunakan npm, Anda juga dapat langsung mendownload paket rilis terbaru dan memasukkannya ke dalam
componentsproyek, sama seperti menggunakan komponen yang ditulis sendiri, tetapi npm lebih nyaman.
npm install miniprogram-picker --production
// 或者
npm install miniprogram-picker --save Klik bilah menu di Alat Pengembang WeChat: Alat --> Bangun npm. Saat ini, Anda akan menemukan bahwa ada direktori miniprogram_npm tambahan dalam proyek, yang berisi miniprogram-picker yang telah dikompilasi.
Komponen pihak ketiga miniprogram-picker diperkenalkan ke .json . Metode penggunaannya sama dengan menggunakan komponen enkapsulasi Anda sendiri, hanya saja Anda tidak perlu menulis jalur spesifik, yang sangat memudahkan.
{
"usingComponents" : {
"miniprogram-picker" : " miniprogram-picker "
}
} Gunakan miniprogram-picker di .wxml . Saya memberikan dua contoh kecil di sini, yang pertama adalah hubungan tiga tingkat, dan yang kedua adalah hubungan dua tingkat. Untuk atribut dan metode kejadian tertentu, lihat API.
miniprogram-pickertidak memiliki gaya apa pun. Pengembang dapat menyesuaikan gaya tertentu. Akan lebih baik jika Anda terbiasa dengan penggunaanslot. Untuk detailnya, silakan merujuk ke slot komponen program mini 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 > Atur sourceData dan dengarkan peristiwa pickerChange di .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 )
} ,
} ) Pengaturan gaya sederhana di .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;
}
