mini menu

1 образец

Предварительный просмотр эффекта в инструментах разработчика => Идентификатор фрагмента кода: gCEq06mR7nia

2 Установка и использование

1. Получить компонент

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

Скопируйте папку /comComponents/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-цветный интерфейс

Используется совместно с операционным стержнем куб.

 <!-- 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 списка атрибутов

свойство	тип	значение по умолчанию	Необходимый	иллюстрировать
навигация	Множество		да	Список меню навигации {имя, значок, URL}

5ToDo

• Исправление: в расширенной границе есть пиксели, которые не являются гладкими.

Лицензия

Массачусетский технологический институт © MakerGYT