昨天放纵了一天,今天老老实实的学习
vue-awesome-swiper 轮播图的插件
overflow 属性规定当内容溢出元素框时发生的事情。
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
首先npm install vue-awesome-swiper --save 安装这个依赖包
如何使用?
在main.js入口函数引入这个包名
import VueAwesomeSwiper from ‘vue-awesome-swiper’
然后在建立一个swiper组件
<swiper :options="swiperOption">
<swiper-slide v-for="item of swiperList" :key="item.id">
<img class='swiper-img' :src="item.imgurl" >
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
这个相当于建立一个轮播图
在没有学习ajax之前,需要在data中return 数据项
swiperList:[{
//一个对象中存放数据项
id:"",
imgurl:""
},{}]
然后在swiper的标签中引用v-for指令 v-for=“item of swiperList” :key=“item.id”
然后在img标签中的:src中item.imgurl
最后整个Vue的小组件写完之后,需要导入到home首页的大组件中
import HomeSwiper from “./components/Swiper”
然后在components中 引入该组件的名字HomeSwiper
整个轮播图的功能就算完成了。