计算机源码设计项目-1329基于uniapp+express+mysql购物商城模板设计

2022-01-10 16:12:11 来源：计算机源码设计网 浏览：22次

渲染轮播数据
使用swiper组件进行渲染
这里关于图片的宽度，采用rpx设置，如果要占满整屏就是750rpx
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

导航区域
引入字体文件和样式文件，并在app.vue中引入使其成为全局样式
设计图标和文字
商品推荐标题
推荐商品列表：
实现基本的布局
渲染数据
实现导航的点击跳转：
我的超市
这里的页面与推荐热门商品功能一致，因此将热门商品封装成一个组件，实现复用

组件内部通过props属性实现父子传参
export default { props:['goodsList'] };
获取商品数据

onReachBottom
使用该函数，监听页面是否滑到底部，若滑倒底部则加载下一页的数据
要点： 请求下一页数据时，之前的数据要保留，不能够替换

开启下拉刷新
下拉刷新后再次显示第一页数据，情况数组，将pageindex设置为1.再重新获取数据，重新获取数据时加一个延迟效果
当获取数据成功后，取消下拉刷新的效果
 
联系我们
联系我们图片
联系我们和基本信息，电话点击要可以拨打
地图，这里使用地图组件
拨打电话：设备拨打电话

社区图片
结构：左侧是滚动菜单，右侧是对应的内容
左侧菜单使用scroll-view
注：

这里如果要站一整屏，需要先给page设置
左侧滚动区域要想正常滚动，要设置固定高度，不然整个页面都会滚动
获取左侧分类数据

选择高亮效果：

通过比较索引是否相等，相等设置高亮效果，.索引默认为0
添加点击事件，通过点击来修改默认索引
获取右侧数据
当点击左侧分类项时，除了修改对应的高亮，还要获取右侧对应的数据

设置右侧内容区域，也要可以滑动
优化：

第一次进入时因该也获取数据，而不是点击时才获取数据
如果对应内容没有数据则展示暂无数据
实现图片预览效果，点击图片可以实现预览（使用api图片中的图片预览函数）
学习视频
因为没有数据这个不做

资讯
实现页面的基本布局

获取数据然后渲染

将资讯数据封装成一个组件

定义过滤器来格式化时间，过滤器定义为全局方便以后使用

点击资讯可以进入资讯详情页面（难点）
利用父子组件传参，除了调用父组件的函数，还要将id传过去

资讯详情页面：

实现基本结构
根据id获取相应的数据
渲染数据
获取url中的id是通过onLoad函数
内容部分中含有html标签，可以通过富文本进行解析；也可以使用v-html进行解析
商品详情页
在index.vue中定义商品详情页跳转的函数

同样使用父子组件传参，来调用方法

在index.vue中的goGoodsDetail函数接收id，将其拼接到详情页的url中

注：在商品列表页也要注册相应的函数来获取id

在商品详情页的onLoad方法中获取id，并根据id请求对应的商品详情信息

实现商品详情页顶部轮播图：

获取数据
渲染数据
实现商品价格和名称：

实现基本结构
渲染数据
注：商品信息是一段HTML，要使用uni的富文本或v-html解析；要修改图片的样式，在商品详情页如果不行，就在app.vue中设置

商品页的商品导航菜单，这里使用uni的商品导航组件

照片名称：1基于uniapp+express+mysql购物商城模板首页


照片名称：2uniapp客户端商品详情页


照片名称：3社区图片分类列表页面


照片名称：4图片批量预览效果


照片名称：5uniapp客户端新闻资讯信息列表


照片名称：6新闻资讯详情查看


照片名称：7联系我们效果图


照片名称：8HBuilder导入uniapp源码目录


照片名称：9基于Express服务器源码


照片名称：10基于Express服务器源码


照片名称：11mysql数据库表

上一个计算机源码设计：1335基于Springboot+Vue+ElementUI物流配送管理系统带文档
下一个计算机源码设计：1319基于Springboot+Vue+小程序学生课程考勤系统设计