江苏龙网

  1. 首页 > 生活 > >

使用vue.js咋写出轮播图

说到轮播，那你一定知道鼎鼎大名的swiper，其实用vue来封装swiper是很轻松的事情，我实现了一个。具体教程前往：react转vue--vue2封装swiper轮播组件（2） - react架构经验分享 - SegmentFault
\u0026lt;template\u0026gt; \u0026lt;div class="swiper-container"\u0026gt; \u0026lt;div class="swiper-wrapper"\u0026gt; \u0026lt;div class="swiper-slide" v-for="str in listImg" :style="{ backgroundImage: \u0026#39;url(\u0026#39; + str.url + \u0026#39;)\u0026#39; }"\u0026gt;\u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;div class="swiper-pagination swiper-pagination-white"\u0026gt;\u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt;\u0026lt;/template\u0026gt;\u0026lt;script\u0026gt; import Swiper from \u0026#39;swiper\u0026#39;; import \u0026#39;swiper/dist/css/swiper.min.css\u0026#39;; export default { props: , mounted() { console.log(\u0026#39;mounted\u0026#39;, this) var swiper = new Swiper(\u0026#39;.swiper-container\u0026#39;, { pagination: \u0026#39;.swiper-pagination\u0026#39;, paginationClickable: true, loop: true, speed: 600, autoplay: 4000, onTouchEnd: function() { swiper.startAutoplay() } }); } }\u0026lt;/script\u0026gt;\u0026lt;style lang="less"\u0026gt; .swiper-container { width: 100%; height: 10rem; .swiper-wrapper { width: 100%; height: 100%; } .swiper-slide { background-position: center; background-size: cover; width: 100%; height: 100%; img { width: 100%; height: 100%; } } .swiper-pagination-bullet { width:0.833rem; height: 0.833rem; display: inline-block; background: #7c5e53; } }\u0026lt;/style\u0026gt;
■网友
众所周知，轮播图现今在网页中占据着必不可少的地位。任何的一个网站，一个网页，都会出现一个轮播图，而轮播图更是利用JavaScript做出的一个比较基础的动画。
【使用vue.js咋写出轮播图】 下面是写轮播图的一点见解，很多地方可能不是很全面，甚至可能说是错误的，希望大家多多指点。

■网友
谢邀，这里有一只：GitHub - hilongjw/vue-slide: A lightweight slide component for vue
■网友
GitHub - ElemeFE/vue-swipe: A touch slider for vue.js.饿了么前端做的，简单易用
■网友
这边有一个原生js封装的轻量的轮播图组件，性能和 使用起来都挺好的 你可以试试
https://github.com/zwhGithub/vue-swiper


    推荐阅读


    上一篇：对于移动客户端或者前端开发人员，算法是否重要

    下一篇：win7怎样永久屏蔽某个网站用啥浏览器都打不开，或是登陆指定网站需要密码