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 ; /*定义颜色*/
}

3 ألوان واجهة المستخدم

تستخدم جنبا إلى جنب مع شريط التشغيل cu-bar

 <!-- 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المهام

• للإصلاح: هناك وحدات بكسل في الحدود الموسعة ليست سلسة

رخصة

معهد ماساتشوستس للتكنولوجيا © MakerGYT