banner图的框架swiper的使用

1 篇文章 0 订阅

banner图swiper框架的使用


1.安装swiper cnpm i swiper -s
2.在mine.js 引入css样式 inport “swiper/css/swiper.min.css”
3.在components中创造banner插件
在banner文件中的结构

4.引入axios文件,实现数据异步请求,为了拿数据方便,在mine.js入口文件中,直接写
import axiosfrom= “axios”
Vue.prototype.$http = axios
5.在created函数中引入数据,通过api代理的方法,解决跨域问题

created(){
    this.$http.get("/api/db/in_theaters").then(res=>){
        
    }
}

6.在vue.config.js中设置API代理

7.传入banner文件数据

8.解决web后缀图片不能加载的问题

9.引入swiper
import Swiper from “swiper”
10.实例化swiper,但是此处要用一个方法,以方便获得真是的dom结构

11.如果想要加小圆点的话
在swiper-slide同级,加一个swiper-pagination,在$nextTickz()函数中添加属性

pagination:{
el:"swiper-pagination"
}

12.加一个loading图,在数据未加载的时候显示
在commons.scss中写一个.loading样式,直接写在swiper-container标签上,判断条件,判断什么时候出现、

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值