广州智能建站模板深圳网站建设怎样
目录
- 预览效果
 - 准备工作
 
- 代码分析与思路
 - 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
 - 准备好若干图片
 
