uni-app 小项目开发 仿小米商城 前端开发2

实现

1. 顶部搜索框下的导航栏及点击分类进行换页。
   
   
   
2. 推荐页的轮播图搭建。
   
3. 推荐页面中的分类导航。
   
4. 以组件的方式实现商品的展示。
   

实现方法

主要采用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