小程序底部彈出式導航菜單

1 樣例

在開發者工具中預覽效果=>代碼片段ID: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. 使用組件
   參考/pages

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

結合操作條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 屬性列表

屬性	類型	默認值	必填	說明
navs	Array		是	導航菜單列表 {name,icon,url}

5 ToDo

• [ ] 待修復:展開邊界有像素點不順暢

License

開源地址:https://github.com/MakerGYT/mini-menu/,開發中對網上代碼^[1]進行整理修復、精簡部分內容並進行組件化。
MIT © MakerGYT

---

1. LoveEmpathy.仿酷安app發布按鈕動效[EB/OL].https://www.yuque.com/colorui/colorui/atv8pa 2020 ↩︎