目录 预览效果 准备工作 代码分析与思路 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 准备好若干图片