miniprogram picker
Release 1.0.7
bindcolumnchange لتغيير range وقيم value يدويًا لإكمال تغيير الارتباط الخاص بالمنتقي مزعجة للغاية ولا تؤدي إلى الازدواجية في استخدام منطق الأعمال المختلفة.sourceData ببنية بيانات ثابتة وإجراء بعض التكوينات الضرورية. يمكن أن يساعد هذا المكون المطورين تلقائيًا في التعامل مع منطق الارتباط.2.2.1 من مكتبة قاعدة البرامج المصغرة أو أعلى،开发者工具1.02.1808300 أو أعلى، ويدعم البرنامج المصغر استخدام npm لتثبيت حزم الطرف الثالث. 
| ملكية | يوضح | يكتب | القيمة الافتراضية | هل هو مطلوب؟ |
|---|---|---|---|---|
| sourceData | مصفوفة المصدر، وsourceData لها أبعاد متعددة، ويمكن أن يكون للمنتقي عدة مستويات. يجب أن يكون التنسيق عبارة عن مجموعة من المصفوفات والكائنات، راجع المثال | صفيف | [] | حقيقي |
| خطوات | أمر المنتقى | رقم | 1 | خطأ شنيع |
| showfieldName | اسم الحقل لعرض البيانات | خيط | 'اسم' | خطأ شنيع |
| اسم الحقل الفرعي | اسم الحقل للعقدة التابعة. قيمة هذا الحقل هي صفيف المستوى التالي للمنتقي. | خيط | "مجموعة فرعية" | خطأ شنيع |
| OtherNeedFieldsName | يمكن للمطورين تخصيص الحقول الأخرى التي يجب إرجاعها وفقًا لاحتياجاتهم. | صفيف | [] | خطأ شنيع |
| defaultIndex | المصفوفة المنخفضة للعناصر المحددة الافتراضية، لها الأسبقية على القيمة الافتراضية | صفيف | [] | خطأ شنيع |
| defaultValue | صفيف القيمة للعنصر المحدد الافتراضي عند تمكين هذه السمة، يكون defaultValueUniqueField مطلوبًا. | صفيف | [] | خطأ شنيع |
| defaultValueUniqueField | الحقل الوحيد لمصفوفة القيمة للعنصر المحدد الافتراضي، المستخدم للمقارنة مع المصفوفة المصدر | خيط | '' | - |
| تحديد تلقائي | أثناء التهيئة، هل يلزم استدعاء حدث bindchange تلقائيًا لإرجاع النتائج إلى المطور؟ | منطقية | خطأ شنيع | خطأ شنيع |
| initColumnSelectedIndex | بعد تحديد العمود n، ما إذا كانت القيمة المحددة للعمود أكبر من n ستتم تهيئتها تلقائيًا إلى 0 | منطقية | خطأ شنيع | خطأ شنيع |
| عاجز | سواء لتعطيل | منطقية | خطأ شنيع | خطأ شنيع |
| طريقة | يوضح | يكتب | كائن الحدث |
|---|---|---|---|
| com.bindchange | يتم تشغيله عند نقرات المستخدم للتأكيد | EventHandle | Event.detail = {selectedIndex, SelectedArray} |
| bindcancel | يتم تشغيله عندما ينقر المستخدم على "إلغاء الأمر". | EventHandle | Event.detail هو كائن الحدث عند تشغيل bindcancel للمكون الأصلي. |
| bindcolumnchange | يتم تشغيله عندما تتغير قيمة العمود عندما يقوم المستخدم بتمريره | EventHandle | Event.detail هو كائن الحدث عند تشغيل bindcolumnchange للمكون الأصلي. |
sourceData عبارة عن مصفوفة مصدر، وهي عبارة عن مجموعة من هياكل كائنات المصفوفة sourceData ولها أبعاد متعددة، ويمكن أن يكون للمنتقي عدة مستويات.steps ، تحتاج إلى تحديد ترتيب المنتقى بشكل صريح، على سبيل المثال، بالنسبة للربط ثلاثي المستويات، قم بتعيين steps: 3 .steps على 3 ، فيجب أن تستوفي sourceData هذا الترتيب.initColumnSelectedIndex ، ستفشل أداة تصحيح أخطاء المطورين، ومع ذلك، لم يتم العثور على أي مشكلة على الجهاز الحقيقي حتى الآن، لذا فإن الأمر متروك للمطور ليقرر ما إذا كان سيتم تمكينها أم لا.bindchange :selectedIndex : مجموعة فهرس لتحديدات المنتقي؛selectedArray : مصفوفة قيمة لعناصر اختيار المنتقي؛bindchange و bindcancel و bindcolumnchange و disabled . يمكنك التحقق من كود المصدر للحصول على التفاصيل. قم بتثبيت حزمة miniprogram-picker .
تذكير: إذا كنت لا ترغب في استخدام npm، فيمكنك أيضًا تنزيل أحدث حزمة إصدار مباشرةً ووضعها في
componentsالمشروع، تمامًا مثل استخدام المكونات المكتوبة بنفسك، ولكن npm أكثر ملاءمة.
npm install miniprogram-picker --production
// 或者
npm install miniprogram-picker --save انقر على شريط القائمة في أدوات مطور WeChat: الأدوات --> Build npm. في هذا الوقت، ستجد أن هناك دليل miniprogram_npm إضافي في المشروع، والذي يحتوي على miniprogram-picker المترجم.
تم تقديم مكون الجهة الخارجية miniprogram-picker في .json . طريقة الاستخدام هي نفس طريقة استخدام المكونات المغلفة الخاصة بك، باستثناء أنك لا تحتاج إلى كتابة مسار محدد، وهو أمر مريح للغاية.
{
"usingComponents" : {
"miniprogram-picker" : " miniprogram-picker "
}
} استخدم miniprogram-picker في .wxml . وأعطي هنا مثالين صغيرين، الأول هو ارتباط من ثلاثة مستويات، والثاني هو ارتباط من مستويين. للحصول على سمات وطرق أحداث محددة، يرجى الرجوع إلى واجهة برمجة التطبيقات.
لا يحتوي
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;
}
