vue实现仿淘宝详情页商品轮播效果
vue 2021-10-07 14:03:36

1.png

1、使用组件：

https://github.com/antoniandre/vueper-slides

 

demo：https://antoniandre.github.io/vueper-slides/

 

2、安装组件

C/C++ Code复制内容到剪贴板
  1. npm install vueperslides  

 

vue3

C/C++ Code复制内容到剪贴板
  1. npm install vueperslides@next  

 

完整代码：

使用：

XML/HTML Code复制内容到剪贴板
  1.           <album bigImgHeight="300px" smallImgHeight="58px" class="album"></album>  
  2.   
  3. <script>  
  4. import album from './components/album.vue'  
  5.   
  6. export default {  
  7.     components: {  
  8.         album  
  9.     },  
  10.   
  11. ...  

 

album组件

XML/HTML Code复制内容到剪贴板
  1. <template>  
  2.   <div class="album">  
  3.   
  4.     <vueper-slides  
  5.       ref="vueperslides1"  
  6.       :touchable="false"  
  7.       fade  
  8.       :autoplay="false"  
  9.       :bullets="false"  
  10.       @slide="$refs.vueperslides2.goToSlide($event.currentSlide.index, { emit: false })"  
  11.       :fixed-height="bigImgHeight">  
  12.   
  13.       <vueper-slide  
  14.         v-for="(slide, i) in slides"  
  15.         :key="i"  
  16.         :image="slide.image">  
  17.       </vueper-slide>  
  18.     </vueper-slides>  
  19.   
  20.     <vueper-slides  
  21.       class="no-shadow thumbnails"  
  22.       ref="vueperslides2"  
  23.       @slide="$refs.vueperslides1.goToSlide($event.currentSlide.index, { emit: false })"  
  24.       :visible-slides="slides.length"  
  25.       :fixed-height="smallImgHeight"  
  26.       :bullets="false"  
  27.       :touchable="false"  
  28.       :gap="2.5"  
  29.       :arrows="false">  
  30.       <vueper-slide  
  31.         v-for="(slide, i) in slides"  
  32.         :key="i"  
  33.         :image="slide.image"  
  34.         @click.native="$refs.vueperslides2.goToSlide(i)">  
  35.       </vueper-slide>  
  36.     </vueper-slides>  
  37.   
  38.   </div>  
  39. </template>  
  40.   
  41. <script>  
  42. import { VueperSlides, VueperSlide } from 'vueperslides'  
  43. import 'vueperslides/dist/vueperslides.css'  
  44.   
  45. export default {  
  46.     props: {  
  47.         bigImgHeight: {  
  48.             type: String,  
  49.             default () {  
  50.                 return '400px'  
  51.             }  
  52.         },  
  53.         smallImgHeight: {  
  54.             type: String,  
  55.             default () {  
  56.                 return '75px'  
  57.             }  
  58.         }  
  59.     },  
  60.     components: {  
  61.         VueperSlides,  
  62.         VueperSlide  
  63.     },  
  64.     data () {  
  65.         return {  
  66.             slides: [  
  67.                 {  
  68.                     image: require('@/assets/frontend/banner/el-teide-volcano-spain.jpeg')  
  69.                 },  
  70.                 {  
  71.                     image: require('@/assets/frontend/banner/chernobyl-ukraine.jpeg')  
  72.                 },  
  73.                 {  
  74.                     image: require('@/assets/frontend/banner/crater-lake-oregon-usa.jpeg')  
  75.                 },  
  76.                 {  
  77.                     image: require('@/assets/frontend/banner/el-teide-volcano-spain.jpeg')  
  78.                 }  
  79.             ]  
  80.         }  
  81.     },  
  82.     mounted () {  
  83.         console.log('mounted?')  
  84.     }  
  85. }  
  86. </script>  
  87.   
  88. <style lang="less" scoped>  
  89. .album{  
  90.     width: 100%;  
  91.     .thumbnails {  
  92.         margin: auto;  
  93.         max-width: 300px;  
  94.         margin-top: 20px;  
  95.     }  
  96.     .thumbnails .vueperslide {  
  97.         box-sizing: border-box;  
  98.         border: 1px solid #fff;  
  99.         transition: 0.3s ease-in-out;  
  100.         opacity: 0.7;  
  101.         cursor: pointer;  
  102.     }  
  103.     .thumbnails .vueperslide--active {  
  104.         box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);  
  105.         opacity: 1;  
  106.         border-color: #000;  
  107.     }  
  108. }  
  109.   
  110. </style>  

 

本文来自于：http://www.yoyo88.cn/study/vue/602.html

上一篇 vue2-无缝滚动组件-vue-seamless-scroll
下一篇 css实现引导箭头间歇晃动效果
相关的文章
Powered by yoyo苏ICP备15045725号