uni-app 小项目开发 仿小米商城 前端开发2
实现
- 顶部搜索框下的导航栏及点击分类进行换页。
- 推荐页的轮播图搭建。
- 推荐页面中的分类导航。
- 以组件的方式实现商品的展示。
实现方法
主要采用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
uni-app 小项目开发 仿小米商城 前端开发2相关推荐
- 人工智能实战小程序之语音_前端开发
1. 人工智能实战小程序之准备工作 2. 人工智能实战小程序之语音_前端开发 今天这部分主要讲小程序前端功能的开发 由于我偏后端,css是我的弱项,可能很多人和我一样开发小程序不知道如何下手,希望本篇 ...
- 网页设计-仿小米商城-前端期末大作业
网页设计-仿小米商城-前端期末大作业 (点我下载资源) 点我下载资源
- 在线教育项目04_讲师管理前端开发
在线教育项目04_讲师管理前端开发 一.登录功能(临时) 跨域问题 框架使用的过程 二.前端讲师开发 1.讲师列表 2.讲师列表添加分页 3.讲师列表条件查询实现 4.讲师列表删除功能 5.讲师列表删 ...
- 开发web前端_移动前端开发和web前端开发的区别？
如果说非要有区别的话应该就是开发的软件和方式不同,因为他们本来就不属于一端的东西,具体来看看下面: web前端开发 用最简单粗暴的方式来讲,就是用html + css + javascript来构建一 ...
- 移动web前端开发框架_移动前端开发是Web前端开发吗？
移动端开发并不是Web前端开发,但移动前端开发和web前端开发其实都属于前端开发的范围,目前前端发展的趋势就是大前端,可以说是包罗万象.但不论趋势如何发展,目前来看HTML.CSS和JavaScrip ...
- iOS客户端开发与Web前端开发
来源:Bang 不知不觉做iOS客户端开发已经半年多了,了解到iOS客户端开发与Web前端开发的一些异同,写一下. 1.版本升级.用户角度上看,客户端升级必须让用户手动下载整个新的安装包覆盖安装,而w ...
- 好程序员web前端分享移动前端开发和web前端开发的区别
好程序员web前端培训分享移动前端开发和web前端开发的区别,既然都是前端开发,两者肯定有紧密的联系,但是楼主主要询问区别,我就先简单聊一下相同点,之后在着重分析不同点. 移动前端开发和web前端开发 ...
- 北风网web前端开发培训课程 web前端开发实例视频教程下载
web前端开发视频教程 Web前端开发工程师培训 零基础Web前端开发工程师高端培训配项目开发(月薪过万的最佳选择) 课程讲师:叮咚 课程分类:套餐推荐 适合人群:初级 课时数量:305课时 用到技术 ...
- 前端游戏开发和h5前端开发_人们不告诉您有关前端开发的10件事
前端游戏开发和h5前端开发 介绍 (Intro) Front-end development involves the building of webpages and user interfaces ...
最新文章
- 成为你向往的那只独角兽——《独角兽项目》出版在即
- 美媒人工智能(AI)代表了计算的优点，没有人类推理的缺点
- nyoj-915—— +-字符串
- 养殖者运送猫狗过河问题（面向对象）
- 断面计算土方excel表_Civil 3D工程量计算小技巧，一次打包给你！
- 新浪微博API使用方法
- python使用rpa需要什么插件_使用Python制作ArcGIS插件基础篇——工具介绍
- python画雷达图-Python 详解雷达图/蛛网图
- 告诉你一个真实的北京
- C语言——顺序结构训练题
- Maven使用指南 配置阿里云镜像提高下载速度
- 模拟电子经典200问
- 详细直播平台开发细节，提供成品直播系统源码
- 互联网巨头们的地摊争夺战
- Linux 定时任务shell脚本定时移动服务器日志文件到指定目录下
- [TVB]百余部经典剧集海报
- gta5 oracle文件,gta5 oracle | 手游网游页游攻略大全
- 继第一个卡拉OK字幕之后，第一个动态字幕诞生～T-ara - Day By Day
- flv/f4v/m4v
- 硬件设计40之什么是PLA、NTSC？