VUE商城（vue商城项目毕业论文）

qiaoqingyi 2023-03-06 691

默认

本篇文章给大家谈谈VUE商城，以及vue商城项目毕业论文对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

1、基于Vue实现商城详情页“视差滚动”效果
2、电商平台可以用vue技术吗
3、从零开始Gin Web+Vue商城的搭建（一）-- 前后端框架搭建和简单沟通
4、使用vue作出锤子官方商城的3d-banner效果

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

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

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

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

视察滚动：让多层背景以不同的速度去进行移动

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技术吗

vue是可以做电商平台的，主要是根据电商平台选取的方案不同vue使用方法也不同。

扩展：vue能不能在电商平台使用？首先要了解什么是vue与传统JS和JQuery框架不同，Vue的渐进式框架表示开发者可以由简单组件写起，渐渐搭建出一个复杂的前端平台。形成Vue渐进式框架的核心概念为：组件化，MVVM，响应式，和生命周期。vue.js一般用的地方是：1、针对于移动端，首选vue入门成本低，快速上手；2、针对于维护较少，组件复用要求不高的项目；3、针对具有复杂交互逻辑的前端应用；4、可以提供基础的架构抽象；5、可以通过AJAX数据持久化，保证前端用户体验。

vue技术涵盖了首页，商品列表页，搜索页面，购物车页面，个人中心页面使用的vue-cli3.0进行搭建项目，所以说vue不仅可以用在电商平台还可以用在页面框架。