制作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來注冊一個(gè)輪播圖插件 */
Vue.use(VueAwesomeSwiper)
第三步：
在自己的組件文件夾中 新建一個(gè)輪播圖組件 MySwiper.vue：
并復(fù)制以下代碼到你的組件中：
<template>
? <div class="imglist">
? ? <h1>輪播圖</h1>
? ? <swiper ref="mySwiper" :options="swiperOptions" v-if="imgList.length">
@click.native? 如果組件使用點(diǎn)擊事件無效 可以使用修飾符.native 轉(zhuǎn)成原生事件?
? ? ? <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,
? ? ? ? ? /* 如果設(shè)置為true，當(dāng)切換到最后一個(gè)slide時(shí)停止自動(dòng)切換。 */
? ? ? ? ? stopOnLastSlide:false,
? ? ? ? ? /* 如果設(shè)置為false，用戶操作swiper之后自動(dòng)切換不會(huì)停止，每次都會(huì)重新啟動(dòng)autoplay。 */
? ? ? ? ? disableOnInteraction:false
? ? ? ? },
無縫銜接
? ? ? ? loop:true
? ? ? }
? ? }
? },
? created(){
數(shù)據(jù)是異步的，數(shù)據(jù)還沒有到情況下，輪播圖組件已經(jīng)開始加載了，導(dǎo)致配置無縫輪播的時(shí)候效果出不來怎么辦？
解決辦法：使用條件判斷，當(dāng)數(shù)據(jù)沒獲取道德時(shí)候不加載輪播圖?
? ? axios.get('/data/imgList.json')
? ? .then(res=>{
? ? ? this.imgList=res.data.imgList;
? ? ? /* 使用refs的方法，必須要配置this.$nextTick獲取到dom之后再執(zhí)行sildeTo方法 */
? ? ? this.$nextTick(()=>{
組件是后來加載上去的，相當(dāng)于更新了dom的值，這時(shí)候想要獲取dom必須要借助$nextTick方法
? ? ? ? /* 在異步操作里面sildeTo第一個(gè)參數(shù)表示第幾張 */
? ? ? ? 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會(huì)防止組件內(nèi)的樣式污染全局使用，會(huì)優(yōu)先使用組件內(nèi)的樣式 */
.swiper-container {
? width: 500px;
? height: 400px;
? border: 1px solid red;
? display: block;
}
</style>
最后把組件引用import到需要的文件中去
less的使用
1、npm i less --save-dev 把less源碼安裝到開發(fā)環(huán)境
/* less文件是通過less.loader.js 來編譯成css最后加載到頁面中的 */
2、npm i less-loader@6 --save-dev 安裝less解析器 （★一定要指定版本）
3、lessc -v 查看版本 如果版本號(hào)顯示不出來 npm i less -g 全局安裝一下less
4、在main.js? import less from 'less'? Vue.use(less)? 作用：在所有頁面都可以使用less預(yù)編譯css語言
5、獨(dú)立的vue文件需要引入less <style lang="less"></style>
引入less的兩種形式
第一種方式 使用導(dǎo)入式 引入樣式庫
<style scoped lang="less">
@import url(./less/common.less);
</style>
第二種引入方式 在script中導(dǎo)入樣式
import './less/common.less'
less中變量的使用 定義方式：
@key:value; 使用方式：@key;
字符串拼接變量使用方式?
@img:'./img/';?
background:url("@{img}1.png") url里面必須要使用引號(hào)(單雙引號(hào)都可以)
多層嵌套+變量計(jì)算；
寫減法的時(shí)候左右要加空格，否則會(huì)理解為杠-
<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>
定義一個(gè)函數(shù)；
.test(@color:red,@size:14px){
? ? background: @color;
? ? font-size:@size;
}
.box1{
//? 不傳參，使用默認(rèn)的；
? ? .test()
}
.box2{
//? 給函數(shù)傳參；
? ? .test(@color:green,@size:30px)
}
