mini menu

1 échantillon

Prévisualiser l'effet dans les outils de développement => ID d'extrait de code : gCEq06mR7nia

2 Installation et utilisation

1. Obtenir le composant

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

Copiez le dossier /components/navs-bong du projet dans le chemin du composant

2. Pour introduire un composant, ajoutez-le au fichier json correspondant à la page qui utilise le composant :

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

3. Utilisation de la référence/des pages du composant

 <!-- 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 couleursUI

Utilisé conjointement avec la barre d'opération 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 liste d'attributs

propriété	taper	valeur par défaut	Requis	illustrer
navigations	Tableau		Oui	Liste du menu de navigation {nom, icône, URL}

5ÀFaire

• À corriger : il y a des pixels dans la limite étendue qui ne sont pas lisses

Licence

MIT © MakerGYT