1.VUE的接口獲取swiper輪播：
在public文件下創建一個data文件夾再創建imgJson.json文件：
{
? ? "imglist":[
? ? ? ? {
? ? ? ? "imgurl":"https://img2.baidu.com/it/u=2741764822,31952901&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
? ? ? ? ? "url":"www.baidu.com"
? ? ? ? },
? ? ? ? {
? ? ? ? "imgurl":"https://img0.baidu.com/it/u=2531828205,2557062548&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281",
? ? ? ? ? "url":"www.baidu.com"
? ? ? ? },
? ? ? ? {
? ? ? ? ? ? "imgurl":"https://img0.baidu.com/it/u=2752337540,3600841572&fm=253&fmt=auto&app=138&f=JPEG?w=1058&h=500",
? ? ? ? ? "url":"www.baidu.com"
? ? ? ? },
? ? ? ? {
? ? ? ? ? ? "imgurl":"https://img1.baidu.com/it/u=1054244600,3783921739&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=250",
? ? ? ? ? ? "url":"www.baidu.com"
? ? ? ? }
? ? ]
}
main.js里全局引用一下：
安裝教程在上篇
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
/* 導入less */
import less from 'less'
/* 把less當作組件引入 */
Vue.use(less)
Vue.config.productionTip = false
Vue.use(VueAwesomeSwiper)
new Vue({
? router,
? store,
? render: h => h(App)
}).$mount('#app')
components下創建一個輪播組件：
<template>
? <div id="app">
? ? <!-- 因為在main.js中全局引入過了，所以組件可以直接拿來用 -->
? ? <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" width="100%" height="100%" />
? ? ? </swiper-slide>
? ? ? <div class="swiper-pagination" slot="pagination"></div>
? ? </swiper>
? </div>
</template>
<script>
import axios from "axios";
export default {
? name: "App",
? created: function () {
? ? /* 數據是異步的， 數據還沒有到情況下，輪播圖組件已經開始加載了，
? ? 導致配置無縫輪播的時候效果出不來 怎么辦？*/
? ? /* 解決方法：使用條件判斷，當數據還沒有獲取到的時候不加載輪播圖，
? ? 數據到了，再加載 */
? ? axios.get("/data/imgJson.json").then((res) => {
? ? ? this.imgList = res.data.imglist;
? ? ? /* 使用refs的方法 必須要配置$nextTick獲取到dom之后再執行slideTo方法 */
? ? ? /* 在這里使用$nextTick方法 是因為組件是后來有數據的時候加載上去的，
? ? ? 擔當于更新了dom的值，這時候想獲取dom就必須借助于$nextTick方法 */
? ? ? ? ?/* 在異步操作里面slideTo第一個參數表示第幾張 ?*/
? ? ? this.$nextTick(()=>{
? ? ? ? this.$refs.mySwiper.swiper.slideTo(2,1000,false)
? ? ? })
? ? });
? },
? methods: {
? ? goto: function (url) {
? ? ? /* console.log(url) */
? ? ? /* window.open會打開一個新的窗口 */
? ? ? window.open(url);
? ? ? /* location.href在當前頁跳轉 */
? ? ? /* location.href = url; */
? ? },
? },
? data() {
? ? return {
? ? ? imgList: [],
? ? ? swiperOptions: {
? ? ? ? effect:'fade',/* cube */
? ? ? ? pagination: {
? ? ? ? ? el: ".swiper-pagination",/* notNextTick: true, */
? ? ? ? },
? ? ? ? loop:true,
? ? ? ? autoplay: {
? ? ? ? ? delay: 1000,
? ? ? ? ? /* 如果設置為true，當切換到最后一個slide時停止自動切換。（loop模式下無效）。 */
? ? ? ? ? stopOnLastSlide: false,
? ? ? ? ? /* 如果設置為false，用戶操作swiper之后自動切換不會停止，每次都會重新啟動autoplay。 */
? ? ? ? ? disableOnInteraction: false,
? ? ? ? },
? ? ? },
? ? };
? },
? mounted() {
? ? /* console.log("Current Swiper instance object", this.$refs.mySwiper.swiper); */
? ? /* this.swiper.slideTo(3, 1000, true); */
? ? // console.log(this.$refs.mySwiper.swiper.slideTo(1,1000,false) )
? },
};
</script>
<style scoped>
/* scoped 會防止組件內的樣式污染全局 也會優先使用組件內的樣式 */
.swiper-container {
? width: 700px;
? height: 500px;
? border: 1px solid red;
}
.red{
? color: red;
}
</style>
App.vue中引入輪播組件：
<template>
? <div id="app">
? ? <h1 class="red">輪播圖</h1>
? ? <my-swiper />
? </div>
</template>
效果圖：
2.安裝使用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 查看版本
4、在main.js? import less from 'less'? Vue.use(less)
5、獨立的vue文件需要引入less <style lang="less"></style>
實際應用:
App.vue文件：
<template>
? <div id="app">
? ? <h1 class="red">輪播圖</h1>
? ? <my-swiper />
? ? <div class="box">
? ?<h1>歡迎使用less</h1>
? ? </div>
? ? <div class="box1">
? ? <div class="box2">
? ? ? ? <div class="box3">
? ? </div>
? ? </div>
</div>
<ul>
? <li v-for="(v,i) in 4" :key="i">{{v}}</li>
</ul>
<div class="a1">我是a1</div>
<div class="a2">我是a2</div>
? </div>
</template>
<script>
/* 這樣也能引入 */
/* import './less/common.less' */
import MySwiper from '@/components/MySwiper.vue'
export default{
? components:{
? ? MySwiper
? }
}
</script>
<style scopd lang="less">
/* 使用導入式引入樣式庫 */
@import url(./less/common.less);
</style>
src文件下創建less文件夾，創建兩個less文件：
common.less文件：
/* 可以在less中引入別的less文件 從而提高代碼復用 */
@import url(./init.less);
/* 定義一個函數 */
.test(@color:red,@size:14px){
? background: @color;
? font-size: @size;
}
.a1{
? .test()
}
.a2{
? .test(@color:@colorGreen,@size:30px)
}
ul{
? width: @k;
? height: @k;
? background: @colorRed;
}
li:nth-of-type(1){
? /* 加減法的時候左右一定要空格,否則會理解為橫杠- */
? width: @k - 20px;
? background: @colorGreen;
}
.box1{
? width: @k*2;
? height: @k*2;
? background: @colorRed;
? .box2{
? ? width: @k;
? height: @k;
? background:@colorGreen;
? ? .box3{
? ? ?width: @k/2;
? height: @k/2;
? background: @colorBlue;
? ? }
? }
}
.box{
? width: 200px;
? height: 200px;
? border: 1px solid red;
? ?/* ?url里面必須要用引號 */
? background: url("@{imgurl}logo.png") no-repeat;
? h1{
? color: @colorRed;
}
}
init.less文件：
*{margin: 0;padding: 0;}
/* 使用變量 可以嵌套 圖片路徑也可以使用變量*/
@colorRed:red;
@colorGreen:green;
@colorBlue:blue;
@imgurl:'../assets/';
@k:100px;
效果圖：
★☆使用手冊：
1、npm i less --save-dev 把less源碼安裝到開發環境
/* less文件是通過less.loader.js 來編譯成css最后加載到頁面中的 */
2、npm i less-loader@6 --save-dev 安裝less解析器 （★一定要指定版本）
3、lessc -v 查看版本
4、在main.js? import less from 'less'? Vue.use(less)
5、獨立的vue文件需要引入less <style lang="less"></style>
less中變量的使用 定義方式：@key:value; 使用方式：@key;
字符串拼接變量使用方式 @img:'./img/'; background:url("@{img}1.png")
寫減法的時候左右要加空格，否則會理解為杠-
多層嵌套+變量計算；
<div class="box1">
? ? <div class="box2">
? ? ? ? <div class="box3"></div>
? ? </div>
</div>
<style lang="less">
@k:100px;
.box1{
? ? width: @k;
? ? height:@k;
? ? background: red;
? ? .box2{
? ? ? ? width: @k/2;
? ? ? ? height:@k/2;
? ? ? ? background: green;
? ? ? ? .box3{
? ? ? ? ? ? width: @k/3;
? ? ? ? ? ? height:@k/3;
? ? ? ? ? ? background: blue;
? ? ? ? }
? ? }
}
</style>
混合 = 函數
<div class="box1">我是box1</div>
<div class="box2">我是box2</div>
<style lang="less">
//定義一個函數；
.test(@color:red,@size:14px){
? ? background: @color;
? ? font-size:@size;
}
.box1{
//? 不傳參，使用默認的；
? ? .test()
}
.box2{
//? 給函數傳參；
? ? .test(@color:green,@size:30px)
}
</style>
運算符
可以對高度、寬度、角度進行計算；
<ul>
? ? <li v-for="item in 4">{{item}}</li>
</ul>
<style lang="less" scoped>
? @k:10px;
? ? ul{
? ? ? ? list-style: none;
? ? ? ? ? li{
? ? ? ? ? ? ? border:1px solid ;
? ? ? ? ? ? ? margin:10px 0 ;
? ? ? ? ? }
? ? ? ? ? ? li:nth-child(1){
? ? ? ? ? ? ? ? width: @k + @k;
? ? ? ? ? ? ? ? height:@k;
? ? ? ? ? ? }
? ? ? ? ? ? li:nth-child(2){
? ? ? ? ? ? ? ? width: @k -5px;
? ? ? ? ? ? ? ? height:@k;
? ? ? ? ? ? }
? ? ? ? ? ? li:nth-child(3){
? ? ? ? ? ? ? ? width: @k * @k;
? ? ? ? ? ? ? ? height:@k;
? ? ? ? ? ? }
? ? ? ? ? ? li:nth-child(4){
? ? ? ? ? ? ? ? width: @k / 2;;
? ? ? ? ? ? ? ? height:@k;
? ? ? ? ? ? }
? ? }
</style>
