miniprogram picker

มินิโปรแกรมตัวเลือก

การแนะนำ

• ส่วนประกอบ Picker ของแอปเพล็ต WeChat เป็นเพียงส่วนประกอบกึ่งสำเร็จรูป เมื่อเปิดใช้งานการเชื่อมโยงหลายระดับ คุณจะต้องตรวจสอบเหตุการณ์ bindcolumnchange เพื่อเปลี่ยน range และ value ด้วยตนเองเพื่อให้การเปลี่ยนแปลงการเชื่อมโยงของ Picker เสร็จสมบูรณ์ ค่อนข้างลำบากและไม่เอื้อต่อการทำซ้ำในการใช้งานตรรกะทางธุรกิจต่างๆ
• เพื่อที่จะแก้ไขจุดบกพร่องข้างต้น ส่วนประกอบนี้จะสรุปองค์ประกอบตัวเลือกดั้งเดิมของแอปเพล็ต WeChat อีกครั้ง นักพัฒนาจำเป็นต้องจัดเตรียมโครงสร้างข้อมูลคงที่ให้กับ sourceData และดำเนินการกำหนดค่าที่จำเป็นบางอย่าง ส่วนประกอบนี้สามารถช่วยให้นักพัฒนาจัดการตรรกะการเชื่อมโยงได้โดยอัตโนมัติ
• ส่วนประกอบนี้รองรับการสร้าง npm เริ่มต้นจากไลบรารีฐานมินิโปรแกรมเวอร์ชัน 2.2.1 หรือสูงกว่า และ开发者工具1.02.1808300 หรือสูงกว่า มินิโปรแกรมรองรับการใช้ npm เพื่อติดตั้งแพ็คเกจของบริษัทอื่น

ผล

เอพีไอ

คุณสมบัติ

คุณสมบัติ	แสดงให้เห็น	พิมพ์	ค่าเริ่มต้น	มันจำเป็นไหม?
แหล่งข้อมูล	อาร์เรย์แหล่งที่มา SourceData มีหลายมิติ และตัวเลือกสามารถมีได้หลายระดับ รูปแบบจะต้องเป็นคอลเลกชันของอาร์เรย์และวัตถุ โปรดดูตัวอย่าง	อาร์เรย์	-	จริง
ขั้นตอน	คำสั่งของพิคเกอร์	ตัวเลข	1	เท็จ
แสดงFieldName	ชื่อฟิลด์เพื่อแสดงข้อมูล	สตริง	'ชื่อ'	เท็จ
เซ็ตย่อยFieldName	ชื่อฟิลด์ของโหนดลูก ค่าของฟิลด์นี้คืออาร์เรย์ระดับถัดไปของ Picker	สตริง	'เซตย่อย'	เท็จ
NeedFieldsName อื่น ๆ	นักพัฒนาสามารถปรับแต่งฟิลด์อื่นๆ ที่ต้องส่งคืนได้ตามความต้องการ	อาร์เรย์	-	เท็จ
ดัชนีเริ่มต้น	อาร์เรย์ตัวห้อยของรายการที่เลือกเริ่มต้น โดยมีความสำคัญมากกว่า defaultValue	อาร์เรย์	-	เท็จ
ค่าดีฟอลต์	อาร์เรย์ค่าของรายการที่เลือกเริ่มต้น เมื่อเปิดใช้งานแอตทริบิวต์นี้ จำเป็นต้องมี defaultValueUniqueField	อาร์เรย์	-	เท็จ
defaultValueUniqueField	ฟิลด์เดียวของอาร์เรย์ค่าของรายการที่เลือกเริ่มต้น ซึ่งใช้เพื่อเปรียบเทียบกับอาร์เรย์ต้นทาง	สตริง	-	-
เลือกอัตโนมัติ	ในระหว่างการเริ่มต้น จำเป็นต้องเรียกเหตุการณ์ bindchange โดยอัตโนมัติเพื่อส่งคืนผลลัพธ์ให้กับนักพัฒนาหรือไม่?	บูลีน	เท็จ	เท็จ
initColumnSelectedIndex	หลังจากเลือกคอลัมน์ที่ n แล้ว ไม่ว่าค่าที่เลือกของคอลัมน์ที่มากกว่า n จะถูกเตรียมใช้งานเป็น 0 โดยอัตโนมัติหรือไม่	บูลีน	เท็จ	เท็จ
พิการ	ไม่ว่าจะปิดการใช้งาน	บูลีน	เท็จ	เท็จ

วิธี

วิธี	แสดงให้เห็น	พิมพ์	วัตถุเหตุการณ์
การผูกมัด	ทริกเกอร์เมื่อผู้ใช้คลิกยืนยัน	จัดการเหตุการณ์	event.detail = {selectedIndex, SelectedArray}
ผูกยกเลิก	เริ่มทำงานเมื่อผู้ใช้คลิกยกเลิก	จัดการเหตุการณ์	event.detail เป็นออบเจ็กต์เหตุการณ์เมื่อมีการทริกเกอร์bindcancelขององค์ประกอบดั้งเดิม
การผูกคอลัมน์การเปลี่ยนแปลง	ทริกเกอร์เมื่อค่าของคอลัมน์เปลี่ยนแปลงเมื่อผู้ใช้เลื่อนคอลัมน์นั้น	จัดการเหตุการณ์	event.detail เป็นออบเจ็กต์เหตุการณ์เมื่อมีการทริกเกอร์bindcolumnchangeของส่วนประกอบดั้งเดิม

กฎ

• sourceData คืออาร์เรย์ต้นทางซึ่งเป็นคอลเลกชันของโครงสร้างออบเจ็กต์อาร์เรย์ sourceData มีหลายมิติ และตัวเลือกสามารถมีได้หลายระดับ
• steps คุณต้องระบุลำดับของตัวเลือกอย่างชัดเจน ตัวอย่างเช่น สำหรับการเชื่อมโยงสามระดับ ให้กำหนด steps: 3
• ควรสังเกตว่า ตัวอย่างเช่น หาก steps ถูกตั้งค่าเป็น 3 sourceData จะต้องเป็นไปตามลำดับนี้
• หลังจากเปิดใช้งานแอตทริบิวต์ initColumnSelectedIndex แล้ว เครื่องมือแก้ไขจุดบกพร่องของนักพัฒนาจะล้มเหลว อย่างไรก็ตาม จนถึงขณะนี้ยังไม่พบปัญหาในเครื่องจริง ดังนั้นจึงขึ้นอยู่กับนักพัฒนาที่จะตัดสินใจว่าจะเปิดใช้งานหรือไม่
• วัตถุเหตุการณ์ถูกกระตุ้นโดย bindchange :
  • selectedIndex : อาร์เรย์ดัชนีของการเลือก Picker;
  • selectedArray : อาร์เรย์ค่าของรายการการเลือก Picker;
• วิธีการและคุณสมบัติบางอย่างของส่วนประกอบนี้สอดคล้องกับพฤติกรรมของ API ดั้งเดิมของ WeChat เช่น: bindchange , bindcancel , bindcolumnchange , disabled คุณสามารถตรวจสอบซอร์สโค้ดเพื่อดูรายละเอียดได้

วิธีใช้

1. ติดตั้งแพ็คเกจ miniprogram-picker

   คำเตือน: หากคุณไม่ต้องการใช้ npm คุณยังสามารถดาวน์โหลดแพ็คเกจรุ่นล่าสุดได้โดยตรงและวางไว้ใน components ของโปรเจ็กต์ เช่นเดียวกับการใช้ส่วนประกอบที่เขียนด้วยตัวเอง แต่ npm จะสะดวกกว่า

   npm install miniprogram-picker --production
   // 或者
   npm install miniprogram-picker --save

2. คลิกแถบเมนูในเครื่องมือสำหรับนักพัฒนา WeChat: เครื่องมือ -> Build npm ในเวลานี้ คุณจะพบว่ามีไดเร็กทอรี miniprogram_npm เพิ่มเติมในโปรเจ็กต์ ซึ่งมี miniprogram-picker ที่คอมไพล์แล้ว

3. คอมโพเนนต์ของบุคคลที่สาม miniprogram-picker ถูกนำมาใช้ใน . .json วิธีการใช้งานจะเหมือนกับการใช้ส่วนประกอบแบบห่อหุ้มของคุณเอง ยกเว้นว่าคุณไม่จำเป็นต้องเขียนเส้นทางเฉพาะซึ่งสะดวกมาก

   {
       "usingComponents" : {
       	"miniprogram-picker" : " miniprogram-picker "
       }
   }

4. ใช้ miniprogram-picker ใน .wxml ฉันให้ตัวอย่างเล็กๆ สองตัวอย่างที่นี่ ตัวอย่างแรกคือการเชื่อมโยงสามระดับ และตัวอย่างที่สองคือการเชื่อมโยงสองระดับ สำหรับแอตทริบิวต์เฉพาะและวิธีการเหตุการณ์ โปรดดูที่ API

   miniprogram-picker ไม่มีสไตล์ใด ๆ นักพัฒนาสามารถปรับแต่งสไตล์เฉพาะได้ มันจะดีกว่าถ้าคุณคุ้นเคยกับการใช้งาน slot สำหรับรายละเอียด โปรดดูที่ slot ขององค์ประกอบ mini program 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 >

5. ตั้งค่า 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 )
       } ,
     } )

6. การตั้งค่าสไตล์อย่างง่ายใน . .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;
   }

ช่วย

• ยินดีต้อนรับสู่การแจ้งปัญหา หากมีข้อผิดพลาดในโค้ดหรือสิ่งที่คุณไม่เข้าใจ ฉันจะแก้ไขโดยเร็วที่สุด
• หากมีฟีเจอร์ที่จำเป็นต้องใช้งาน คุณสามารถฝากข้อความแจ้งปัญหาได้ หากคุณชอบ คุณสามารถติดดาวได้ ขอบคุณสำหรับการสนับสนุนของคุณ