七、Vue组件库：Element、Swiper（轮播专用组件） (2)

【0】定义一些图片
【1】使用Element的走马灯组件
【2】控制走马灯图片样式

<template> <div> <h1>路由实例parent</h1> <hr/> <!-- 【1】使用Element的走马灯组件 --> <el-carousel> <el-carousel-item v-for="(img,index) in imgs" :key="index"> <img :src="img" /> <!-- 循环图片 --> </el-carousel-item> </el-carousel> </div> </template> <script> export default{ name:\'parent\', components:{}, data(){ return{ imgs:[//【0】定义一些图片 "http://www.wallcoo.com/nature/2010_Landscape_1920_Desktop_11/wallpapers/1600x1200/Moose%20Pond%20and%20Mount%20Pleasant%20in%20Autumn%2C%20Maine.jpg", "https://cli.clewm.net/file/2015/01/20/81b71bc509d09368d4602a4b5b05d093.jpg", "https://hbimg.huabanimg.com/a84ec58661bc95efb974e2eebea2b3fd880a8fb12870a-ksYmbV_fw658", ] } }, filters:{}, directives:{}, } </script> <style scoped> /* 【2】控制走马灯图片样式 */ .el-carousel__item h3 { color: #475669; font-size: 14px; opacity: 0.75; line-height: 150px; margin: 0; } .el-carousel__item:nth-child(2n) { background-color: #99a9bf; } .el-carousel__item:nth-child(2n+1) { background-color: #d3dce6; } img { width:100%; } </style>

效果：

三、Swiper（轮播专用组件）

官网：https://www.swiper.com.cn
Vue中使用：https://github.com/surmon-china/vue-awesome-swiper
官方API文档：https://www.swiper.com.cn/api/index.html

1.1 概述

Swiper常用于移动端网站的内容触摸滑动

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。

Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！

1.2 安装Swiper CDN <link href="http://www.likecs.com/path/to/swiper/dist/css/swiper.css"/> <script type="text/javascript" src="http://www.likecs.com/path/to/swiper.js"></script> <script type="text/javascript" src="http://www.likecs.com/path/to/vue.min.js"></script> <script type="text/javascript" src="http://www.likecs.com/path/to/dist/vue-awesome-swiper.js"></script> <script type="text/javascript"> Vue.use(window.VueAwesomeSwiper) </script> NPM

首先要进入项目目录。

cnpm install vue-awesome-swiper --save 或 npm install vue-awesome-swiper --save 1.3 引入 1.3.1全局引入 （mount with global） src/main.js import Vue from \'vue\' import VueAwesomeSwiper from \'vue-awesome-swiper\' // require styles import \'swiper/dist/css/swiper.css\' Vue.use(VueAwesomeSwiper, /* { default global options } */) 1.3.2组件内安装（局部引入）（mount with component） src/components/parent.vue // require styles import \'swiper/dist/css/swiper.css\' import { swiper, swiperSlide } from \'vue-awesome-swiper\' export default { components: { swiper, swiperSlide } } 1.3.3 s-s-r安装（mount with s-s-r） // If used in nuxt.js/s-s-r, you should keep it only in browser build environment if (process.browser) { const VueAwesomeSwiper = require(\'vue-awesome-swiper/dist/s-s-r\') Vue.use(VueAwesomeSwiper) } 1.4 定义插件相关参数（custom swiper plugin） src/main.js import Swiper from \'swiper\' Swiper.use({ name: \'pluginName\', params: { pluginSwitch: false, }, on: { init() { if (!this.params.pluginSwitch) return console.log(\'init\') }, // swiper callback... } }) 1.5 使用swiper

参数配置相关详见官方API文档：https://www.swiper.com.cn/api/index.html

src/main.js import Vue from \'vue\' import App from \'./App\' import router from \'@/router.js\'//先引入自定义路由 //[1]引入swiper import VueAwesomeSwiper from \'vue-awesome-swiper\' import \'swiper/dist/css/swiper.css\' Vue.use(VueAwesomeSwiper)//[2]使用swiper Vue.use(Carousel)//以下2个为使用走马灯必须组件 Vue.use(CarouselItem) Vue.config.productionTip = false new Vue({ el: \'#app\', template: \'<App/>\', router,//把路由投到vue实例 components: { App } }) parent.vue