鹤山网站建设网络推广推广培训
目录
- 预览效果
- 准备工作
- 代码分析与思路
- 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
- 准备好若干图片