博客
关于我
2020最新用swiper制作轮播图?
阅读量:299 次
发布时间:2019-03-01

本文共 3310 字,大约阅读时间需要 11 分钟。

/*

轮播图插件:
下载轮播图插件(不要下载最高版本的,因为高版本的使用的是swiper4文档)
npm install vue-awesome-swiper@2.5.4
vue-awesome-swiper文档:https://github.com/surmon-china/vue-awesome-swiper
https://blog.csdn.net/qq_41108402/article/details/80546626

项目中:

1,先在入口文件(main.js)引入
顺序是先引入,再调用css
import VueAwesomeSwiper from ‘vue-awesome-swiper’
import ‘swiper/dist/css/swiper.css’
(这个css路径根据node_modules中的swiper里面的css路径,如果报错,查看node_modules中的swiper路径)
Vue.use(VueAwesomeSwiper);
(使用Vue.use注册一下VueAwesomeSwiper,目的是供全局使用)

2,创建Swiper.vue

3,在首页引入Swiper.vue

import Swiper from ‘…/base/Swiper’;路径自己定
(注意:Swiper.vue中导入的是Swiper)
在首页中components注册一下Swiper组件,最后使用

*/

/----------------------------------------------------------------------------------------/

用具体详细步骤来操作如下:
1.npm install vue-awesome-swiper@2.5.4
2.npm install axios

3.min.js文件引入

// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from './router/index.js'import 'swiper/dist/css/swiper.css'import VueAwesomeSwiper from 'vue-awesome-swiper'Vue.use(VueAwesomeSwiper) //vue的第三方插件专门供vue使用Vue.config.productionTip = false/* eslint-disable no-new */new Vue({  el: '#app',  router,  components: { App },  template: '
'})

4.创建一个swiper.vue

5.放入你要引入的主文件 我写入的是home.vue

6.在src下创建一个(放入json文件)的api->index.js

index.js

import axios from 'axios'//导出一个axios有很多,所以必须分开用变量来接收,不用default是导出全部export let getBanner=function (){//用get接收json数据 return axios.get('/static/mock/banner.json');}

7.在static静态文件下创建一个mock文件->banner.json

banner.json

{    "banner":[        {"src":"https://img11.360buyimg.com/n2/s372x372_jfs/t1/59714/19/15384/96258/5dcd8916Ec8adb87c/19eb1d2ab0baf01c.jpg!q70.dpg.webp"},        {"src":"https://m.360buyimg.com/mobilecms/s750x750_jfs/t22045/307/929094700/422408/3bc9906d/5b1be210Nf5b61f6c.jpg!q80.dpg.webp"},        {"src":"https://img12.360buyimg.com/mobilecms/s519x519_jfs/t1/119364/38/3338/552423/5ea7e439Ef85df0e7/3759b12c3c3d84bf.png.webp"}    ]}

8.效果图如下:

在这里插入图片描述

//扩展当有很多接口图片时,使用方法如下:

index.js

import axios from 'axios'// 创建公共的接口名axios.defaults.baseURL="/static/mock/";//请求的拦截(接口)axios.interceptors.request.use((config)=>{//一般是加请求头参数    //当你有共同的参数时可以用此参数来用    config.headers.a="1234"   console.log(config);//可以找到a的值1234    return config})//每次数据拿到的值都是data,也可以创建一个公共的//data已经拿到数据的响应axios.interceptors.response.use((res)=>{//数据响应的拦截 //return 啥就返回啥 return res.data;})//axios是封装的promise//导出一个axios有很多,所以必须分开用变量来接收,不用default是导出全部export let getBanner=function (){//用get接收json数据   return axios.get('banner.json');}export let getBanners=function (){//用get接收json数据    return axios.get('banner.json');   }

2.请求拦截接口参数:参考图片

在这里插入图片描述
3.methods方法那里可以省略data部分
//当你在公共方法index.js定义后才可以省略data

methods:{//方法    getb(){      return  getBanner().then((res)=>{    this.bannerlist=res.banner;   })    }  }

4.在index.js中创建公共的接口名之后:

index.js中这一步可以省略前面的static/moke/

//导出一个axios有很多,所以必须分开用变量来接收,不用default是导出全部export let getBanner=function (){//用get接收json数据   return axios.get('banner.json');//省略后的}export let getBanners=function (){//用get接收json数据    return axios.get('banner.json');//省略后的   }   ...   export可以抛出很多数据...
你可能感兴趣的文章
Multimodal Unsupervised Image-to-Image Translation多通道无监督图像翻译
查看>>
MySQL Cluster与MGR集群实战
查看>>
multipart/form-data与application/octet-stream的区别、application/x-www-form-urlencoded
查看>>
mysql cmake 报错,MySQL云服务器应用及cmake报错解决办法
查看>>
Multiple websites on single instance of IIS
查看>>
mysql CONCAT()函数拼接有NULL
查看>>
multiprocessing.Manager 嵌套共享对象不适用于队列
查看>>
multiprocessing.pool.map 和带有两个参数的函数
查看>>
MYSQL CONCAT函数
查看>>
multiprocessing.Pool:map_async 和 imap 有什么区别?
查看>>
MySQL Connector/Net 句柄泄露
查看>>
multiprocessor(中)
查看>>
mysql CPU使用率过高的一次处理经历
查看>>
Multisim中555定时器使用技巧
查看>>
MySQL CRUD 数据表基础操作实战
查看>>
multisim变压器反馈式_穿过隔离栅供电:认识隔离式直流/ 直流偏置电源
查看>>
mysql csv import meets charset
查看>>
multivariate_normal TypeError: ufunc ‘add‘ output (typecode ‘O‘) could not be coerced to provided……
查看>>
MySQL DBA 数据库优化策略
查看>>
multi_index_container
查看>>