mini menuダウンロード - mini menuソースコードのダウンロード

mini menu

AI ソースコード

1.0.0

ダウンロード

1サンプル

開発者ツールで効果をプレビュー => コードスニペット ID: gCEq06mR7nia

2 インストールと使用方法

コンポーネントの取得

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

プロジェクト内の /components/navs-bong フォルダーをコンポーネントパスにコピーします

コンポーネントを導入するには、コンポーネントを使用するページに対応する json ファイルにコンポーネントを追加します。

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

コンポーネントリファレンス/ページの使用

 <!-- 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色UI

操作バー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 >