小程式底部彈出式導航選單
阿新 • • 發佈:2020-07-01
mini-menu
小程式底部彈出式導航選單
在開發者工具中預覽效果=>程式碼片段ID:gCEq06mR7nia
樣例
安裝使用
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'
},
...
}
})
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>
/* app.wxss */
@import "colorui/main.css";
@import "colorui/icon.css";
page {
--add-action:#39b54a; /*定義顏色*/
}
屬性列表
屬性 | 型別 | 預設值 | 必填 | 說明 |
---|---|---|---|---|
navs | Array | [] | 是 | 導航選單列表 {name,icon,url} |
ToDo
- [ ] 待修復:展開邊界有畫素點不順暢
License
MIT © MakerGYT