mini menu

1 ตัวอย่าง

ดูตัวอย่างเอฟเฟกต์ในเครื่องมือสำหรับนักพัฒนา => รหัสข้อมูลโค้ด: gCEq06mR7nia

2 การติดตั้งและการใช้งาน

1. รับส่วนประกอบ

git clone https://github.com/MakerGYT/mini-menu.git

คัดลอกโฟลเดอร์ /components/navs-bong ในโปรเจ็กต์ไปยังเส้นทางคอมโพเนนต์

2. หากต้องการแนะนำส่วนประกอบ ให้เพิ่มลงในไฟล์ json ที่สอดคล้องกับหน้าที่ใช้ส่วนประกอบดังกล่าว:

{
  "usingComponents" : {
    "menu" : " /components/navs-bong/navs-bong " 
  }
}

3. การใช้การอ้างอิงส่วนประกอบ/หน้า

 <!-- index.wxml -->
< menu navs =" {{navs}} " /> 

 Page ( {
  data : {
    navs : [ {
      name : '动态' ,
      src : 'https://cdn.nlark.com/yuque/0/2019/png/280373/1568102197856-assets/web-upload/0a3840c5-1699-4507-b1d8-dfbbe0683fd0.png' ,
      url : '../pages/other'
    } ,
    ...
    ]
  }
} ) 

 /* index.wxss */
page {
	--add-action : # 39b54a ; /*定义颜色*/
}

UI 3 สี

ใช้ร่วมกับแถบควบคุมการทำงาน คิวบาร์

 <!-- index.wxml -->
< menu navs =" {{navs}} " />
< view class =" cu-bar foot tabbar bg-white " >
  < view class =" action text-green " >
    < view class =" cuIcon-homefill " > </ view > 首页
  </ view >
  < view class =" action text-gray " >
    < view class =" cuIcon-similar " > </ view > 分类
  </ view >
  < view class =" action text-gray add-action " >
    <!-- 此处删去原有button-->
    发布
  </ view >
  < view class =" action text-gray " >
    < view class =" cuIcon-cart " >
      < view class =" cu-tag badge " > 99 </ view >
    </ view >
    购物车
  </ view >
  < view class =" action text-gray " >
    < view class =" cuIcon-my " >
      < view class =" cu-tag badge " > </ view >
    </ view >
    我的
  </ view >
</ view > 

รายการแอตทริบิวต์ 4 รายการ

คุณสมบัติ	พิมพ์	ค่าเริ่มต้น	ที่จำเป็น	แสดงให้เห็น
นำทาง	อาร์เรย์		ใช่	รายการเมนูการนำทาง {name,icon,url}

5สิ่งที่ต้องทำ

• วิธีแก้ไข: มีพิกเซลในขอบเขตที่ขยายซึ่งไม่ราบรื่น

ใบอนุญาต

MIT © MakerGYT