vue2 pc商城 商品详情页

已于 2023-08-24 14:21:47 修改
阅读量446 收藏 8
点赞数 1
文章标签： javascript css vue.js
于 2023-08-05 08:59:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62336925/article/details/132115486
版权 
   <div
      style="
        padding-top: 100px;
        display: flex;
        justify-content: center; /* 在主轴上居中对齐 */
        align-items: center; /* 在交叉轴上居中对齐 */
      "
    >
      <div class="wos-df">
        <div>
          <div style="width: 500px; height: 500px">
            <img :src="mainImgUrl" style="width: 100%; height: 100%" />
          </div>

          <div style="margin-top: -4vw">
            <i class="el-icon-arrow-left" @click="imgLeft()"></i>
            <ul class="Img_ul"   >
              <li 
             
                v-for="(item, index) in imgUrlList"
                :key="index"
                class="Img_li"
                :style="imgStyle"
                @click="changeImg(item, index)"
              >
                <img
                  :class="index === imgActiveIndex ? 'img_activeBorder' : ''"
                  :src="item"
                  style="width: 100px; height: 100px"
                />
              </li>
            </ul>
            <i class="el-icon-arrow-right" @click="imgRight()"></i>
          </div>
        </div>
      </div>
      <div style="margin-left: 25px">
        <div class="a2">
          <h2 class="container">
            提拉米苏(约2磅)提拉米苏(约2磅)提拉米苏(约2磅)提拉米苏(约2磅)
            提拉米苏(约2磅)提拉米苏(约2磅)提拉米苏(约2磅)提拉米苏(约2磅)
            提拉米苏(约2磅)提拉米苏(约2磅)提拉米苏(约2磅)提拉米苏(约2磅)
          </h2>
          <div class="a21">
            <div class="a211">+
              <span class="color">售价:</span>
              <span class="prices">198</span>
              <span class="color">元</span>
              <span class="shic" style="margin-left: 50px; font-size: 18px"
                >原价:<span
                  class="prices2"
                  style="font-size: 30px; font-weight: 700; margin-left: 10px"
                  >198</span
                ></span
              >
              <span>元</span>
            </div>
            <div class="wos-df" style="margin-top: 40px">
              <div class="zhichi">支持全国</div>
            </div>
            <div class="a23">
              <p></p>
              <span class="color">区域：</span>
              <span>北京、上海、广州、深圳、天津、重庆、南京、长沙 </span>
            </div>

            <div class="a25">
              <a class="buttonClass1">联系卖家</a>
            </div>
          </div>
        </div>
      </div>
    </div>
 data () {
    return {
      mainImgUrl: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
      imgUrlList: [
        'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
        'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
        'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg'
      ],
      imgActiveIndex: 0, // 当前移动图片的索引值
      imgDistance: -30, // 移动的距离
      allDistance: - 30, // 总移动距离
      index: 0,
      calleft: 0

    }
  },
  computed: {
    imgStyle () {
      return {
        transform: `translate3d(${this.imgDistance}px, 0, 0)` // 计算移动的距离(x,y,z)
      }
    }
  },


  methods: {
    changeImg (item, index) {
      this.mainImgUrl = item
      let move= this.imgActiveIndex
      this.imgActiveIndex = index
          if (this.imgActiveIndex >=3&&move< this.imgActiveIndex) {
          this.allDistance = -66 * (this.imgActiveIndex - 4)
          var index1 = 0
          const temp = window.setInterval(() => {
            if (index1 < 33) {
              this.imgDistance-= 4// 每次向右移动的距离
              index1++
              return
            } else {
              window.clearInterval(temp)
            }
          }, 10)
        }
        if (this.imgActiveIndex >=1&&move> this.imgActiveIndex) {
          this.allDistance = -66 * (this.imgActiveIndex - 4)
          var index1 = 0
          const temp = window.setInterval(() => {
            if (index1 < 33) {
              this.imgDistance+= 4// 每次向右移动的距离
              index1++
              return
            } else {
              window.clearInterval(temp)
            }
          }, 10)
        }
  

    },
    imgLeft () {
      if (this.imgActiveIndex > 0) {
        this.imgActiveIndex--  // 索引值-1
        this.imgUrlList.forEach((item, index) => { // 循环小图,通过判断索引值赋值给大图
          if (this.imgActiveIndex === index) {
            this.mainImgUrl = item
          }
        })
      }

      if (this.imgActiveIndex > 1) {
        var index = 0
        const temp = window.setInterval(() => { // 利用定时器实现图片左右移动的动画效果
          if (index < 33) { // 移动次数(33次)
            this.imgDistance += 4 // 每次向左移动的距离 (移动总距离为33*this.imgDistance)
            index++
            return
          } else {
            window.clearInterval(temp) // 移动完清除定时器
          }
        }, 10)
      }
    },
    imgRight () {
      if (this.imgActiveIndex < this.imgUrlList.length - 1) {
        this.imgActiveIndex++
        this.imgUrlList.forEach((item, index) => {
          if (this.imgActiveIndex === index) {
            this.mainImgUrl = item
          }
        })
  
        console.log(this.imgActiveIndex)
        if (this.imgActiveIndex >= 3) {
          this.allDistance = -66 * (this.imgActiveIndex - 4)
          var index = 0
          console.log(this.allDistance)

          const temp = window.setInterval(() => {
            if (index < 33) {
              this.imgDistance -= 4 // 每次向右移动的距离
              index++
              return
            } else {
              window.clearInterval(temp)
            }
          }, 10)
        }
      } else if (this.imgActiveIndex === this.imgUrlList.length - 1) { // 到达最后一张图片，再点击跳转回第一张
        this.imgActiveIndex = 0
        this.mainImgUrl = this.imgUrlList[0]
        var index = 0
        const temp = window.setInterval(() => { // 利用定时器实现图片左右移动的动画效果
          if (index < Math.abs(this.allDistance / 2)) { // 取绝对值再除
            this.imgDistance += (this.imgUrlList.length-5.7) // 每次向左移动的距离 (移动总距离为33*this.imgDistance)
            index++
            return
          } else {
            window.clearInterval(temp) // 移动完清除定时器
          }
        }, 1)
      }
    }
  },

  // 移动
  move () {
    this.timer = setInterval(this.starmove, 2500)
  },
  // 开始移动
  starmove () {
    this.calleft -= 340
    if (this.calleft < -1200) {
      this.calleft = 0
    }
  },
  // 鼠标悬停时停止移动
  stopmove () {
    clearInterval(this.timer)
  },
  // 点击按钮左移
  zuohua () {
    this.calleft -= 340
    if (this.calleft < -1200) {
      this.calleft = 0
    }
  },
  // 点击按钮右移
  youhua () {
    this.calleft += 340
    if (this.calleft > 0) {
      this.calleft = -1020
    }
  }
<style scoped lang="scss">
.el-carousel__item[data-v-a83bd3b0]:nth-child(n + 1) {
  background-color: #fff;
}
.zhichi {
  border: 2px solid #ff8d77;
  padding: 5px;
  border-radius: 5px;
  text-align: center;
  color: #ff4326;
  line-height: 15px;
}
.w {
  width: 1100px;
  margin: 0 auto;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}
.head {
  width: 99vw;
  height: 12vh;
  background-color: #3e8c97;
}
a {
  cursor: pointer;
}

.Img_ul {
  position: relative;
  display: flex;
  left: 10px;
  width: 420px;
  height: 150px;
  overflow: hidden;
  list-style: none;
}
.Img_li {
  float: left;
  margin: 0 8px;
  cursor: pointer;
  box-sizing:border-box;
}
.img_activeBorder {
  border: 3px solid #0dcc73;
}
.img_activeBorder {
  border: 3px solid #0dcc73;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(n) {
  background-color: #99a9bf;
  // text-align: center;
  padding-left: 30px;
  box-sizing: border-box;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.width {
  width: 11.25rem;
  font-size: 14px;
  margin-left: 8px;
  &:nth-child(1) {
    width: 74px;
  }
}
.a2 {
  margin-left: 30px;
}

.a21 .color {
  color: #758188;
}

.a21 .a211 {
  height: 87px;
  // text-align: center;
  line-height: 87px;
  background-color: #f2f5f8;
  color: #758188;
  padding-left: 20px;
}

.a21 .a211 .prices,
.shic {
  margin-left: 10px;
}

.a21 .a211 .prices {
  color: #ff4f0d;
  font-size: 35px;
  font-weight: bold;
}

.a21 .a211 .prices2 {
  text-decoration: line-through;
}

.a21 .a211 .yis {
  margin-left: 230px;
}
.container {
  width: 22vw;
  overflow: hidden; /* 超出部分隐藏 */
  display: -webkit-box; /* 使用-webkit-box布局 */
  -webkit-box-orient: vertical; /* 垂直方向排列内容 */
  -webkit-line-clamp: 2; /* 最多显示两行 */
  text-overflow: ellipsis; /* 超出部分用省略号表示 */
}
.a22 {
  background-color: #f6f9fb;
}

.a22 span,
p {
  margin-top: 10px;
}

.a22 .neir {
  margin-left: 50px;
}

.a23 {
  /* margin-top: 10px; */
  margin-top: 50px;
}

.a24 {
  margin-top: 10px;
}

.a24 .bang {
  display: inline-block;
  border: 3px #edf0f5 solid;
  width: 50px;
  line-height: 40px;
  margin-left: 30px;
  text-align: center;
}

.a24 .bang:hover {
  border: 3px #ff4f0d solid;
}
.aa {
  border: 3px #ff4f0d solid;
}
.a25 {
  margin-top: 50px;
}

.a25 button {
  display: inline-block;
  width: 150px;
  height: 50px;
  border-radius: 5px;
  margin-left: 30px;
}
.el-icon-arrow-left {
  height: 80px;
  background-color: #f7f7f7;
  font-size: 25px;
  text-align: center;
  line-height: 80px;
  display: inline-block;
  position: relative;
  top: 110px;
  right: 10px;
  cursor: pointer;
  color: #000;
}
.el-icon-arrow-right {
  height: 80px;
  line-height: 80px;
  background-color: #f7f7f7;
  font-size: 25px;
  display: inline-block;
  position: relative;
  left: 480px;
  top: -150px;
  cursor: pointer;
  color: #000;
}
.a25 .a25color1 {
  background-color: #ff2a00;
  color: #fff;
  font-size: 20px;
  font-weight: bolder;
  border: 1px #ff4f0d solid;
}
.buttonClass1 {
  color: #fff;
  font-size: 20px;
  border-radius: 10px;
  font-weight: 700;
  background-color: #ff2a00;
  display: inline-block;
  width: 185px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}
</style>

效果图

 目前没有放大镜功能 后续添加

备用代码 

   changeImg (item, index) {
      this.mainImgUrl = item
      let move = this.imgActiveIndex
      this.imgActiveIndex = index
      if (this.imgActiveIndex >= 3 && move < this.imgActiveIndex) {
        this.allDistance = -66 * (this.imgActiveIndex - 4)
        var index1 = 0
        const temp = window.setInterval(() => {
          if (index1 < 33) {
            this.imgDistance -= 4// 每次向右移动的距离
            index1++
            return
          } else {
            window.clearInterval(temp)
          }
        }, 10)
      }
      if (this.imgActiveIndex >= 1 && move > this.imgActiveIndex) {
        this.allDistance = -66 * (this.imgActiveIndex - 4)
        var index1 = 0
        const temp = window.setInterval(() => {
          if (index1 < 33) {
            this.imgDistance += 4// 每次向右移动的距离
            index1++
            return
          } else {
            window.clearInterval(temp)
          }
        }, 10)
      }


    },
    imgLeft () {
      if (this.imgActiveIndex > 0) {
        this.imgActiveIndex--  // 索引值-1
        this.imgUrlList.forEach((item, index) => { // 循环小图,通过判断索引值赋值给大图
          if (this.imgActiveIndex === index) {
            this.mainImgUrl = item
          }
        })
      }

      if (this.imgActiveIndex > 1) {
        var index = 0
        const temp = window.setInterval(() => { // 利用定时器实现图片左右移动的动画效果
          if (index < 33) { // 移动次数(33次)
            this.imgDistance += 4 // 每次向左移动的距离 (移动总距离为33*this.imgDistance)
            index++
            return
          } else {
            window.clearInterval(temp) // 移动完清除定时器
          }
        }, 10)
      }
    },
    imgRight () {
      if (this.imgActiveIndex < this.imgUrlList.length - 1) {
        this.imgActiveIndex++
        this.imgUrlList.forEach((item, index) => {
          if (this.imgActiveIndex === index) {
            this.mainImgUrl = item
          }
        })


        if (this.imgActiveIndex >= 3) {
          this.allDistance = -66 * (this.imgActiveIndex - 4)
          var index = 0


          const temp = window.setInterval(() => {
            if (index < 33) {
              this.imgDistance -= 4 // 每次向右移动的距离
              index++
              return
            } else {
              window.clearInterval(temp)
            }
          }, 10)
        }
      } else if (this.imgActiveIndex === this.imgUrlList.length) { // 到达最后一张图片，再点击跳转回第一张
        this.imgActiveIndex = 0
        this.mainImgUrl = this.imgUrlList[0]
        var index = 0
        const temp = window.setInterval(() => { // 利用定时器实现图片左右移动的动画效果
          if (index < Math.abs(this.allDistance / 2)) { // 取绝对值再除
            this.imgDistance += (this.imgUrlList.length - 5.7) // 每次向左移动的距离 (移动总距离为33*this.imgDistance)
            index++
            return
          } else {
            window.clearInterval(temp) // 移动完清除定时器
          }
        }, 1)
      }
    }

大墨前端
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue仿淘宝商品详情demo
11-09
使用vue2仿照了淘宝商品详情以及加入购物车。包含的页面有首页、分类更多、商品详情，其中商品详情的加入购物车利用了vue的组件功能
VUE构建的商城管理系统.zip
07-11
Vue的数据绑定和组件化特性在这里起到了关键作用，使得商品列表、商品详情页等可以灵活地进行数据更新和展示。 2. 订单管理：管理员可以查看、处理和跟踪订单状态，包括待支付、待发货、已发货、已完成等状态。此...
Vue商城项目（篇4）商品详情页实现
YanHSama的博客
09-15 9816
详情页 步骤1：获取请求数据 mounted(){ // console.log(this.$route.query) let goods_id=this.$route.query.goods_id let promise1=this.axios({ url:'/goods/detail', method:'GET', params:{ goods
2024年Web前端最新实战Vue：基于Vue的移动端购物商城(2)，2024年最新算法面试经典100题
最新发布
2301_82243603的博客
05-12 866
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它在界面上进行操作，调用ADD_GOODS添加商品方法① 向购物车中添加的事件很多地方都要调用，因此借助消息订阅（pubsub-js），在组件中跨级通信。② 安装pubsub-js③ 在Home.vue中，监听添加到购物车消息④ 在YourLikeItem.vue中发布消息⑤ 其他需要添加到购物车的地方操作相同。
Vue学习：20.综合案例-商品列表
weixin_51416826的博客
04-13 957
学而时用之，方能融会贯通！
vue2 实现简易购物车
promise466的博客
02-11 572
当需求的处理程度，过于复杂时，vue的computed计算属性无非是我们更好的选择， watch 实时监听数据，当监听的数据发生变化时，则会调用function
【Vue】Vue前端开发产品详情页的思路--20230103
Season CSDN博客
01-04 397
Vue前端开发产品详情页的思路
商城项目 pc----商品详情页
每天都要努力学习哦~~
06-23 1082
详情页
VUE实现购物商城网站前端源码
xcLeigh
12-18 8685
VUE实现购物商城网站源码，商城网站源码，实现了商城登录注册页面、商城主页面、商品列表页面、商品详细页面、购物车页面，可以在这个模板下借用相关代码，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
Vue学习，使用Vue完成商品展示
qq_60656889的博客
08-20 389
仅供参考，个人学习记录
lyfvue这是一个基于vue2开发在线商城前端
08-10
2. **组件**：在 `components` 目录下，每个文件通常代表一个可复用的 Vue 组件，如商品列表、购物车、商品详情页等。这些组件通过 props 接收数据，并通过事件进行通信。 3. **路由**：`router` 文件夹包含应用的...
PC端完整版商城模板在线商城静态页面
06-11
PC端完整版商城模板在线商城静态页面。包括首页、详情页、列表页、个人中心页等五十多个页面
基于Vue开发的XMall商城前台页面PC端
08-09
基于Vue开发的XMall商城前台页面 PC端
vue node写的PC端电商网站的皮
12-17
css3+ vue写的PC端电商购物车 首页 登录页的皮,本项目只是页面静态文件,没有填充数据,有兴趣的可以下载做个参考.~~~~
vue商城项目笔记+原代码
04-30
开发者可能在笔记中详细解释了如何配置和使用Vuex来管理商品列表、购物车状态等业务数据，以及如何利用Vue Router设置各种页面路由，实现商品详情页、购物车页、结算页等不同页面之间的平滑过渡。同时，源代码会展示...
vue动态列表响应式布局
夏夏
08-20 500
问题描述：选择哪个模块就显示什么 思路：通过标识来判断是否选择，动态控制列表长度及样式 页面渲染代码： <div class="header_tabs"> <ul> <li v-for="(item,index) in headertabs" :key="index" :class="setClass(headertabs)"> <el-card class="update-log...
Vue中的响应式布局
weixin_46549873的博客
03-15 1298
带key，key的值是index, 按照key的值index来比对，默认使用的是v-for的就地复用。带key，key的值是id, 按照id的值来比对，直接将创建好的元素插入到指定为止。当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，3. 根元素没有变化，属性变化了， 复用标签，打补丁更新属性。key值的选择，如果有id使用id，如果没有id使用index。带key，提高for循环的执行效率。
基于vue+element ui 实现商城 商品详情配置功能 封装组件
ZL3064436257的博客
12-09 2074
【代码】基于vue+element ui 实现商城 商品详情配置功能 封装组件。
Vue商城项目（篇5）购物车页面
YanHSama的博客
09-15 2713
图示 步骤1：获取商品信息 mounted(){ // 获取购物车商品信息，保存到data中 let cart=JSON.parse(sessionStorage.getItem('cart')) console.log(cart) this.cart=cart // } 步骤2：将产品渲染到页面 <!-- cart --> <div class="pro
写一个vue的PC端商品详情页
03-31
对不起，我是一名语言模型，无法进行图形化操作，无法为您提供关于Vue的PC端商品详情页的代码。 但我可以为您提供一些Vue相关的代码示例，您可以根据自己的需要进行修改。 1. Vue组件的创建与引用 ``` //组件定义 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值