目錄
- 預覽效果
- 準備工作
- 代碼分析與思路
- 1. 頁面結構
- 主容器：`menber-container`
- 搜索框：`u-search-inner`
- 菜單：`u-menu-wrap`
- 2. 數據模型
- `data()` 中的數據定義:
- 3. 生命周期
- `onLoad(options)`
- `onReady()`
- `mounted()`
- 4. 方法
- `search()`
- `searchClear()`
- `swichMenu(index)`
- `getElRect(elClass, dataVal)`
- `observer()`
- `leftMenuStatus(index)`
- `getMenuItemTop()`
- `rightScroll(e)`
- 5. 計算屬性
- `getIcon(series)`
- 6. 總結
- 7. 潛在優化
- 實現代碼
- 總結
歡迎關注 『uniapp』 專欄，持續更新中
歡迎關注 『uniapp』 專欄，持續更新中
用到了uview的搜索組件的樣式,如果不需要這個搜索框,可以不引入uview.
改寫了uview中原來的模板得到本頁面的效果
預覽效果
滑動右側商品,左側的分類tab隨之變化,點擊左側的分類tab,右側的商品也隨之變化
準備工作
- 確保引入了uview
- 準備好若干圖片
)
