医院行业网站,中国十大互联网公司,网校课程,微信小程序开发平台入口目录 预览效果准备工作代码分析与思路1. 页面结构主容器:`menber-container`搜索框:`u-search-inner`菜单:`u-menu-wrap`2. 数据模型`data()` 中的数据定义:3. 生命周期`onLoad(options)``onReady()``mounted()`4. 方法`search()``searchClear()``swichMenu(index)``getElRe… 目录 预览效果准备工作 代码分析与思路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准备好若干图片