基于Vue实现商城详情页“视差滚动”效果

Posted 2023-03-25

参考技术A

       首先，我们来看一下什么叫 视差滚动 。视差滚动就是 让多层背景以不同的速度进行移动而形成的效果 。可能这句话不是很好理解，我们可以查看 这点网址 来直观的感受一下。

       当我们慢慢滚动页面的时候，会发现 产品主图 和 产品详情 滚动的速度不一致， 产品详情 以正常的速度进行滚动，但是 产品主图 要比 产品详情 滚动慢一倍，所以形成了 视差效果 。你也可以参照下面我给你贴出来的图：

可能从图上，不能直观的感受出来，建议您还是点看上面的网址，直观的感受一下。

        视察滚动：让多层背景以不同的速度去进行移动
       1、至少需要拥有两层背景（缓慢移动区、正常移动区）
       2、将背景设置为相对布局（为缓慢移动设置 top 来缓冲掉 scroll 滚动）
       3、监听 Parallax 组件的滑动，根据滑动来计算 缓慢移动区 top 的值。
       说白了，就是对 缓慢移动区 通过使用相对布局 relative & top 来弥补正常滚动产生的距离。话不多说，咱们码上见真情。

       考虑到可能要有多处使用到这个效果，所以，我们将其封装成组件，通过vue插槽的方式，来实现组件的复用。当然，这里我们默认，您对vue有比较好的掌握。

       模版中，我们使用了两个 slot ,分别接受 缓慢移动区 和 正常移动区 的内容，同时监听了 .parallax 的 scroll 事件，用于判定 缓慢移动区 距离顶部的距离。接着为 .parallax-slow 绑定了属性 :style="top: slowTop" , 确定滚动发生后，其距离顶部的距离。

       这里一定要注意 .parallax 一定要添加 position: absolute; 或者 position: fixed; ,否则，它的 scroll 事件不生效。具体的原因，你可以查看一写css相关的内容，此处不在多叙。
       另外就是 缓慢移动区 和 正常移动区 要设置 position:relative ,这个很重要。

       这个组件的行为主要是就是要计算 缓慢移动区 距离顶部的距离 top ,所有的工作都是围绕着这个逻辑进行实现的。

       我们在视图组件（Home）中使用 视差组件 。

        到此，我们的效果就可以实现了，那么为什么要使用这中效果呢？我个人觉效果是一方面，另一方面还是为了突出页面中的 重点元素 ，比如商品详情页面中， 产品主图 肯定是我们的重点元素，所以让他滑动的慢一些可以增强用户体验。为了照顾有些不喜欢阅读文章的同学，我将 Parallax 组件的内容贴出来。

        最后，感谢您的阅读，祝您学习进步。

基于Vue + SpringBoot实现的前后端分离的商城项目，包含秒杀模块（毕设）

本项目前后端分离，前端基于Vue+Vue-router+Vuex+Element-ui+Axios，后端基于SpringBoot +Redis+ RabbitMQ + MySQL实现。

实现了用户注册与登录，商城首页展示，商品分类展示，商品详情页，购物车，订单结算，我的收藏等功能。

并在原作者的基础上添加了商品秒杀部分。

后端接口全部采用Resultful风格，因此前端接口以及部分内容也有修改。

项目已部署

商城： http://47.95.254.97:8080/

技术栈

• 前端：Vue+Vue-router+Vuex+Element-ui+Axios
• 后端：SpringBoot +Redis+ RabbitMQ
• 数据库：Mysql

功能实现

•  用户注册与登录
•  商品首页展示
•  商品分类列表展示
•  商品详情页
•  购物车
•  订单结算
•  我的收藏
•  我的地址
•  秒杀商品
•  商品支付

运行项目

前端运行

1. Project setup

cd vue-store
npm install

2. Compiles and hot-reloads for development

npm run serve

3. Compiles and minifies for production

npm run build

后端运行

1. 修改application.yml文件中的mysql、redis、rabbitmq的地址
2. 运行SpringBoot项目

 

---

---

页面截图

首页

全部商品

购物车

我的收藏

我的订单

登录

注册