实现
- 顶部搜索框下的导航栏及点击分类进行换页。
- 推荐页的轮播图搭建。
- 推荐页面中的分类导航。
- 以组件的方式实现商品的展示。
实现方法
主要采用uni-app组件进行搭建。uni-app链接:https://uniapp.dcloud.io/
使用的组件:
scroll-view swiper uni-grid uni-group
1.顶部搜索框下的导航栏的实现。
主要采用 scroll-view 来进行实现。点击时添加 active 和 line 类,改变字体颜色和在字体下添加横,将当前的 index 传递给 swiper 以改变当前的展示页,来实现页面变换的效果。
2.推荐页的轮播图的实现。
采用 swiper 进行实现,设置为自动播放。
3.分类导航的实现。
采用 uni-grid 进行宫格式的排列,其中主要是设置 column 展示的行数。
4.商品的展示的实现
在小米商城的原网页上,这样的商品展示部分有许多,故将这一部分封装成组件。在推荐页面上将商品的数据传递给组件,在组件上的添加点击事件,将点击的商品的 id 传递回推荐页面。在组件中使用 uni-group 进行数据的渲染。
遇到的问题
1.scroll-view 去掉导航栏。
在App.vue中添加以下代码
/deep/.uni-scroll-view::-webkit-scrollbar {
/* 隐藏滚动条,但依旧具备可以滚动的功能 */
display: none
}
源码
Github:Github:https://github.com/hrbust1914010305/uni-app-shop