vue 实现类似淘宝的商品详情页的商品展示

vue 实现类似淘宝的商品详情页的商品展示

利用vue和swiper实现缩略图控制 / Swiper互相控制

具体需求描述:

图片大图自动轮播展示,下面的缩略图跟着变化,点击小图切换到对应的大图,大图停止自动轮播
实现效果

实现代码

HTML代码

<swiper :options="swiperOptionTop" class="gallery-top imgs" ref="swiperTop">
     <swiper-slide class="slide-1 imgsList" v-for="item in imageData">
      <img :src="item" alt="">
     </swiper-slide>
     <div class="swiper-button-next swiper-button-black" slot="button-next"></div>
     <div class="swiper-button-prev swiper-button-black" slot="button-prev"></div>
    </swiper>
    <!-- swiper2 Thumbs -->
    <swiper :options="swiperOptionThumbs" class="gallery-thumbs" ref="swiperThumbs">
     <swiper-slide class="slide-1" v-for="item in imageData">
      <img :src="item" alt="">
     </swiper-slide>
    </swiper>

script代码

import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  components: {
   swiper,
   swiperSlide
  },
  data() {
    return {
     swiperOptionTop: {
      effect: "fade",
      orderType: 0,
      spaceBetween: 10,
      navigation: {
       nextEl: '.swiper-button-next',
       prevEl: '.swiper-button-prev'
      },
     },
     swiperOptionThumbs: {
      spaceBetween: 10,
      centeredSlides: true,
      slidesPerView: 'auto',
      touchRatio: 0.2,
      slideToClickedSlide: true,
      // autoplay:true
      autoplay: {
       delay: 4000,
       speed: 1500,
       disableOnInteraction: true	//点击小图之后停止自动轮播
      }
    },
     swiperSlides: []
  },
   mounted() {
   /*商品轮播开始*/
   this.$nextTick(() => {
    const swiperTop = this.$refs.swiperTop.swiper
    const swiperThumbs = this.$refs.swiperThumbs.swiper
    swiperTop.controller.control = swiperThumbs
    swiperThumbs.controller.control = swiperTop
   })
   /*商品轮播结束*/
   }
  }

css代码

 .imgList{
  width: 450px;
  height: 100px;
  margin-top: 20px;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
 }
 .imgListShow{
  flex-shrink: 0;
  width: 100px;
  height: 100%;
  float: left;
  margin-right: 10px;
  border: 2px solid #ccc;
  box-sizing: border-box;
 }
 .imgListShow.active{
  border: 2px solid #1989FA;
 }
 .imgListShow img{
  display: block;
  width: 100%;
  height: 100%;
 }
 .imgs{
  width: 450px;
  height: 450px;
 }
 .imgsList{
  width: 100%;
  height: 100%;
 }
 .imgsList img{
  display: block;
  width: 100%;
  height: 100%;
 }
.gallery-thumbs {
 height: 20%!important;
 box-sizing: border-box;
 padding: 10px 0;
}
.gallery-thumbs .swiper-slide {
 width: 25%;
 height: 100%;
 opacity: 0.4;
}
.gallery-thumbs .swiper-slide img{
 display: block;
 width: 100px;
 height: 100px;
}
.gallery-thumbs .swiper-slide-active {
 opacity: 1;
}
//用来改变按钮的颜色
.swiper-button-prev{
 background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l4.2%2C4.2L8.4%2C22l17.8%2C17.8L22%2C44L0%2C22z'%20fill%3D'%23999999'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-next{
 background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L5%2C44l-4.2-4.2L18.6%2C22L0.8%2C4.2L5%2C0z'%20fill%3D'%23999999'%2F%3E%3C%2Fsvg%3E");
}
已标记关键词 清除标记
<p> <strong><span style="font-size:24px;">课程简介:</span></strong><br /> <span style="font-size:18px;">历经半个多月的时间,</span><span style="font-size:18px;">Debug</span><span style="font-size:18px;">亲自撸的 “企业员工角色权限管理平台” 终于完成了。正如字面意思,本课程讲解的是一个真正意义上的、企业级的项目实战,主要介绍了企业级应用系统中后端应用权限的管理,其中主要涵盖了六大核心业务模块、十几张数据库表。</span><span></span> </p> <p> <span style="font-size:18px;">其中的核心业务模块主要包括用户模块、部门模块、岗位模块、角色模块、菜单模块和系统日志模块;与此同时,</span><span style="font-size:18px;">Debug</span><span style="font-size:18px;">还亲自撸了额外的附属模块,包括字典管理模块、商品分类模块以及考勤管理模块等等,主要是为了更好地巩固相应的技术栈以及企业应用系统业务模块的开发流程!</span><span></span> </p> <p> <br /> </p> <p> <span style="font-size:24px;"><strong>核心技术栈列表</strong></span><span style="font-size:24px;"><strong>:</strong></span> </p> <p> <br /> </p> <p> <span style="font-size:18px;">值得介绍的是,本课程在技术栈层面涵盖了前端和后端的大部分常用技术,包括</span><span style="font-size:18px;">Spring Boot</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Spring MVC</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Mybatis</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Mybatis-Plus</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Shiro(</span><span style="font-size:18px;">身份认证与资源授权跟会话等等</span><span style="font-size:18px;">)</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Spring AOP</span><span style="font-size:18px;">、防止</span><span style="font-size:18px;">XSS</span><span style="font-size:18px;">攻击、防止</span><span style="font-size:18px;">SQL</span><span style="font-size:18px;">注入攻击、过滤器</span><span style="font-size:18px;">Filter</span><span style="font-size:18px;">、验证码</span><span style="font-size:18px;">Kaptcha</span><span style="font-size:18px;">、热部署插件</span><span style="font-size:18px;">Devtools</span><span style="font-size:18px;">、</span><span style="font-size:18px;">POI</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Vue</span><span style="font-size:18px;">、</span><span style="font-size:18px;">LayUI</span><span style="font-size:18px;">、</span><span style="font-size:18px;">ElementUI</span><span style="font-size:18px;">、</span><span style="font-size:18px;">JQuery</span><span style="font-size:18px;">、</span><span style="font-size:18px;">HTML</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Bootstrap</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Freemarker</span><span style="font-size:18px;">、一键打包部署运行工具</span><span style="font-size:18px;">Wagon</span><span style="font-size:18px;">等等,如下图所示:</span><span></span> </p> <img src="https://img-bss.csdn.net/201908070402564453.png" alt="" /> <p> <br /> </p> <p> <br /> </p> <p> <br /> </p> <p> <span style="font-size:24px;">课程内容与收益</span><span style="font-size:24px;">:</span><span></span> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070403452052.png" alt="" /> </p> <p> <span style="font-size:18px;">总的来说,</span><span style="font-size:18px;">本课程是一门具有很强实践性质的“项目实战”课程,即“</span><span style="font-size:18px;">企业应用员工角色权限管理平台</span><span style="font-size:18px;">”,主要介绍了当前企业级应用系统中员工、部门、岗位、角色、权限、菜单以及其他实体模块的管理;其中,还重点讲解了如何基于</span><span style="font-size:18px;">Shiro</span><span style="font-size:18px;">的资源授权实现员工</span><span style="font-size:18px;">-</span><span style="font-size:18px;">角色</span><span style="font-size:18px;">-</span><span style="font-size:18px;">操作权限、员工</span><span style="font-size:18px;">-</span><span style="font-size:18px;">角色</span><span style="font-size:18px;">-</span><span style="font-size:18px;">数据权限的管理;在课程的最后,还介绍了如何实现一键打包上传部署运行项目等等。如下图所示为本权限管理平台的数据库设计图:</span> </p> <p> <span></span> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070404285736.png" alt="" /> </p> <p> <br /> </p> <p> <br /> </p> <p> <br /> </p> <p> <span style="font-size:18px;"><strong>以下为项目整体的运行效果截图:</strong></span> <span></span> </p> <img src="https://img-bss.csdn.net/201908070404538119.png" alt="" /> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070405002904.png" alt="" /> </p> <p> <br /> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070405078322.png" alt="" /> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070405172638.png" alt="" /> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070405289855.png" alt="" /> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070405404509.png" alt="" /> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070405523495.png" alt="" /> </p> <p> <br /> </p> <p> <br /> </p> <p> <br /> </p> <p style="text-align:left;"> <span style="font-size:18px;">值得一提的是,在本课程中,</span><span style="font-size:18px;">Debug</span><span style="font-size:18px;">也向各位小伙伴介绍了如何在企业级应用系统业务模块的开发中,前端到后端再到数据库,最后再到服务器的上线部署运行等流程,如下图所示:</span><span></span> </p> <img src="https://img-bss.csdn.net/201908070406328884.png" alt="" /> <p> <br /> </p>
<p> <span style="background-color:#FFE500;color:#000000;font-size:14px;"><b>【超实用课程内容】</b></span> </p> <ul> <li> <span style="color:#000000;font-size:14px;">通过对一个经典后台管理页面的创建和增删查改内容的讲解,把</span><span style="color:#000000;font-size:14px;">vuejs框架的关键知识点都穿插讲到。</span> </li> <li> <span style="color:#000000;font-size:14px;">包括如何搭建环境,vuejs常用指令,使用ElementUI快速搭建页面,各类表单的创建和验证,vue组件使用,数据传递的各种方式,前端如何模拟数据,以及如何与后端接口联调等等。</span> </li> <li> <span style="color:#000000;font-size:14px;">为了让大家能构造出一个规范、安全的前端系统,课程的最后还介绍了防xss攻击的一些注意事项和代码规范等内容。</span> </li> </ul> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <span style="color:#000000;font-size:14px;background-color:#FFE500;"><b><br /> </b></span> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <span style="color:#000000;font-size:14px;background-color:#FFE500;"><b>【课程如何观看?】</b></span> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <span style="color:#000000;font-size:14px;"><span style="color:#000000;">PC端:</span><a href="https://edu.csdn.net/course/detail/26277"><span style="color:#000000;">https://edu.csdn.net/course/detail/26277</span></a></span> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <span style="color:#000000;font-size:14px;">移动端:CSDN 学院APP</span> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <span style="color:#000000;font-size:14px;">本课程为录播课,课程永久有效观看时长,但是大家可以抓紧时间学习后一起讨论哦~</span> </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <span style="line-height:24px;color:#000000;font-size:14px;">课件、课程案例代码完全开放给你,你可以根据所学知识,自行修改、优化</span> </p>
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页