Vue项目--尚品汇（详情页面）

已于 2022-04-10 20:44:30 修改
阅读量476 收藏
点赞数
分类专栏： VUE项目 文章标签： vue.js javascript 前端
于 2022-01-05 09:42:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36582776/article/details/122304019
版权
本文介绍了Vue项目中详情页面的实现，包括滚动条始终保持顶部、点击高亮、兄弟组件图片联动、小轮播图及放大镜效果。同时探讨了前端布局相关的clientWidth、clientHeight等属性，以及鼠标事件的clientX、clientY等坐标属性的使用。
摘要由CSDN通过智能技术生成

1.滚动条始终在顶部

2.点击高亮的效果

定义一个data：curIndex:0

当点击图片，修改curIndex，为当前图片索引值；且遍历所有图片将其高亮设置为否，将当前图片高亮设置为是。

3.兄弟组件图片内容联动效果

 

最低0.47元/天 解锁文章
七彩冰淇淋与藕汤
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目——商品详情页面图片放大镜效果实现(完成)
yehaocheng520的博客
07-22 5792
昨天在做商品详情页面时，遇到一个需求，就是图片放大镜效果。在图片上鼠标划过时，右侧出现一个大图，用于展示鼠标移过的区域，也就是图片放大镜效果。 效果图基本类似如下： 我之前有篇文章js实现图片放大镜效果：https://blog.csdn.net/yehaocheng520/article/details/115278622?spm=1001.2014.3001.5501 当时是用js实现的效果，因此现在要把代码嫁接到vue创建的项目中。 html部分代码： <div class="big-img
offsetLeft,Left,clientLeft详解(…
墨鱼的博客
03-04 356
假设 obj 为某个 HTML 控件。 obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置，整型，单位像素。 obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置，整型，单位像素。 obj.offsetWidth 指 obj 控件自身的绝对宽度，不包括因 overflo
clientLeft clientTop 的值
闲谈
11-14 239
clientLeft 代表左边边框的宽度 clientTop 代表右边边框的宽度
Js中 关于top、clientTop、scrollTop、offsetTop的用法
程序开发技术博客
05-13 688
网页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth   (包括边线的宽); 网页可见区域高： document.body.offsetHeight  (包括边线的宽); 网页正文全文宽： document.body.scroll
vue-scroll 使用注意（仅作参考）
MagicWing的博客
04-09 417
vue-scroll 使用注意（仅作参考） 没有固定的高 100% 采取的布局及需要注意的点 /** 【在没有固定高的情况下，使用此种布局】需要注意下面五点 <div class="main_left"> <div class="shceme_list_wrapper"> <vue-scroll> <div class="shceme_list
vue微商城项目源码-vue-shop（适用于Node.js 10.x）.zip
06-06
Vue微商城项目源码分析与搭建指南 Vue.js是一个轻量级、高性能的前端JavaScript框架，它具有组件化、响应式、易于上手的特点。在本项目中，我们使用Vue.js构建了一个微商城应用，结合Node.js作为后端服务器，为用户...
vue大型电商项目尚品汇（前台篇）day02.doc
07-09
Vue 大型电商项目尚品汇（前台篇）day02 本文是对 Vue 大型电商项目尚品汇（前台篇）day02 的总结，主要涵盖了 Vue 项目中的技术要点。 一、重写 push/replace 方法 在 Vue 项目中，我们需要重写 push/replace ...
尚硅谷Vue硅谷外卖项目视频.zip
06-04
外卖项目中可能会有如商品列表、购物车、订单详情等组件。每个组件都有自己的独立状态和方法，通过props接收父组件传递的数据，并可以通过自定义事件与父组件通信。理解组件的生命周期和渲染原理，对于提升项目开发...
用vue3实现了尚品汇电商网站项目，源代码可跑通
09-18
通过这个 Vue3 实现的尚品汇电商网站项目，开发者可以深入理解 Vue3 的新特性，并将其应用到实际项目中，提高开发效率和代码质量。同时，这也是一个很好的学习资源，帮助开发者从 Vue2 过渡到 Vue3。
vue大型电商项目尚品汇（后台篇）day03.doc
07-13
"vue大型电商项目尚品汇（后台篇）day03.doc" 本文档主要讲述了 Vue 大型电商项目尚品汇（后台篇）day03 的开发过程，涵盖了平台属性管理、动态展示数据、添加与修改属性、收集平台属性、返回按钮数据回显问题、...
vue仿淘宝商品详情demo
11-09
使用vue2仿照了淘宝商品详情以及加入购物车。包含的页面有首页、分类更多、商品详情，其中商品详情的加入购物车利用了vue的组件功能
对html标签的offsetWidth、clientWidth、scrollWidth属性的理解
guohao326的博客
06-01 2909
如果是用jquery 操作 请用 $(".box")[0].clientHeight; 或$("#box")[0].offsetWidth            $(".box") 是选中 class 为box  的jquery对象    $(".box")[0] 是选中 class 为box 的dom对象         offsetWidth：元素内可见区域的宽度 + 元素边框宽度（如果有滚动...
有效获取scrollWidth clientWidth方法：
Allen专栏
03-12 2011
有效获取scrollWidth clientWidth方法： var scrollWidth = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth); var clientWidth = document.documentElement.clientWidth || document
vue 滚动条样式插件vuescroll
高先生的猫
02-25 2302
安装插件 npm install vuescroll 在main.js中进行引入 import vuescroll from 'vuescroll'; import 'vuescroll/dist/vuescroll.css'; Vue.use(vuescroll); 使用方法,请注意设置vue-scroll的宽和高 <template> <div class='your-container'> <!-- bind you
vue项目如何套样式_vue 项目中自定义scroll样式
weixin_30742297的博客
01-14 236
css3中可以设置滚动条的样式，但是兼容性一直被受争议，偶然看到一个css+js 的方式自定义一个滚动条，现在把他分享出来感谢开源项目@vue-tiny-code上代码class="bar-vertical":style="{ height: `${sizeY}px`, transform: `translateY(${moveY}px)` }">export default {name: ...
vue详情展示页面代码组件
iorn_mangg的博客
06-11 6318
样式效果： 代码： <style lang="less"> .rowContainer { border: 1px solid #E5E5E5; font-size: 14px; .detailColAll{ display: flex; width: 100%; line-height: 40px; bo...
前端“尚品汇”大型购物商城项目（前台页面）系列1
阿卡内的博客
07-07 4987
前端“尚品汇”大型购物商城项目（前台页面）系列1
offsetLeft和clientLeft的区别
做一个开心的全栈工程师
04-27 9974
offsetLeft从字面意思上理解，就是以父元素作为参照点，当前元素相对于父元素左边的偏移量 clientLeft的值就等于border-left的值
锚点双向定位滚动功能-升级版（vue）
lovewebeye的专栏
10-27 2721
对上一文章中的功能进行进一步的优化升级：锚点双向定位滚动功能（Vue实现） 效果1（窗口大于菜单）： 效果2（窗口小于菜单）: 效果3（点击事件）： 代码实现： <template> <div ref="sliderBody" class="slider-main"> <div class="slider-body"> <div ref="sliderMenu" class="slider-menu" :style="
vue3-seamless-scroll单页面引用
最新发布
01-30
在Vue3中引用vue3-seamless-scroll单页面的步骤如下： 1. 首先，确保你已经安装了vue3-seamless-scroll。你可以通过以下命令来安装： ```shell npm install vue3-seamless-scroll ``` 2. 在你的Vue单页面组件中，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值