制作Vue版本的轮播图
第一步：
安装依赖
npm i swiper@5 --save
npm i vue-awesome-swiper@3 --save
第二步：
全局安装
在main.js里面操作：
import VueAwesomeSwiper from 'vue-awesome-swiper'
/* 在node_modules里面找到swiper文件夹里面的css文件 */
import 'swiper/css/swiper.css'
/* 使用Vue.use来注册一个轮播图插件 */
Vue.use(VueAwesomeSwiper)
第三步：
在自己的组件文件夹中 新建一个轮播图组件 MySwiper.vue：
并复制以下代码到你的组件中：
<template>
<div class="imglist">
<h1>轮播图</h1>
<swiper ref="mySwiper" :options="swiperOptions" v-if="imgList.length">
@click.native 如果组件使用点击事件无效 可以使用修饰符.native 转成原生事件
<swiper-slide v-for="(v,i) in imgList" :key="i" @click.native="goto(v.url)">
<img :src="v.imgurl" alt="" width="100%" height="100%" />
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: "ImgList",
data() {
return {
imgList:[],
swiperOptions: {
pagination: {
el: ".swiper-pagination",
clickable:true,
effect:'fade'
},
autoplay: {
delay:1000,
/* 如果设置为true，当切换到最后一个slide时停止自动切换。 */
stopOnLastSlide:false,
/* 如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。 */
disableOnInteraction:false
},
无缝衔接
loop:true
}
}
},
created(){
数据是异步的，数据还没有到情况下，轮播图组件已经开始加载了，导致配置无缝轮播的时候效果出不来怎么办？
解决办法：使用条件判断，当数据没获取道德时候不加载轮播图
axios.get('/data/imgList.json')
.then(res=>{
this.imgList=res.data.imgList;
/* 使用refs的方法，必须要配置this.$nextTick获取到dom之后再执行sildeTo方法 */
this.$nextTick(()=>{
组件是后来加载上去的，相当于更新了dom的值，这时候想要获取dom必须要借助$nextTick方法
/* 在异步操作里面sildeTo第一个参数表示第几张 */
this.$refs.mySwiper.swiper.slideTo(3,1000,false)
})
})
},
computed: {
swiper() {
return this.$refs.mySwiper.$swiper;
},
},
methods:{
goto(url){
window.open(url)
}
}
};
</script>
<style scoped>
/* scoped会防止组件内的样式污染全局使用，会优先使用组件内的样式 */
.swiper-container {
width: 500px;
height: 400px;
border: 1px solid red;
display: block;
}
</style>
最后把组件引用import到需要的文件中去
less的使用
1、npm i less --save-dev 把less源码安装到开发环境
/* less文件是通过less.loader.js 来编译成css最后加载到页面中的 */
2、npm i less-loader@6 --save-dev 安装less解析器 （★一定要指定版本）
3、lessc -v 查看版本 如果版本号显示不出来 npm i less -g 全局安装一下less
4、在main.js import less from 'less' Vue.use(less) 作用：在所有页面都可以使用less预编译css语言
5、独立的vue文件需要引入less <style lang="less"></style>
引入less的两种形式
第一种方式 使用导入式 引入样式库
<style scoped lang="less">
@import url(./less/common.less);
</style>
第二种引入方式 在script中导入样式
import './less/common.less'
less中变量的使用 定义方式：
@key:value; 使用方式：@key;
字符串拼接变量使用方式
@img:'./img/';
background:url("@{img}1.png") url里面必须要使用引号(单双引号都可以)
多层嵌套+变量计算；
写减法的时候左右要加空格，否则会理解为杠-
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
</div>
<style lang="less">
@k:100px;
.box1{
width: @k*2;
height:@k*2;
background: red;
.box2{
width: @k - 5px;
height:@k + 5px;
background: green;
.box3{
width: @k/2;
height:@k/2;
background: blue;
}
}
}
</style>
定义一个函数；
.test(@color:red,@size:14px){
background: @color;
font-size:@size;
}
.box1{
// 不传参，使用默认的；
.test()
}
.box2{
// 给函数传参；
.test(@color:green,@size:30px)
}
