轮播–>案例一:vue下载swiper插件跟vue-awesome-swiper插件,两个都要下载
这是我下载的插件的版本号 然后在main.js中引入,如下图: 为了方便我们才使用插件,所以要引入样式文件.这是重点,得记起来!哈哈… //UI页面布局 <swiper class="swiper-container" :options="swiperOption" > <!-- picList: 数据自己弄一下--> <swiper-slide v-for='(item,index) of picList' :key='index'> <img class='swiper-img' :src='item.url'/> </swiper-slide> <div class="swiper-pagination" slot="pagination"></div> </swiper> //JS export default { name: '', components: {}, data () { return { swiperOption:{ // 参数选项 pagination: { el: '.swiper-pagination', type: 'fraction', }, //循环 loop:true, //设置自动播放速度 //不要写成autoplay: true,会有点问题的,用下面这种写法 autoplay: { disableOnInteraction: false,//手动轮播之后,不会自动轮播,要增加此属性 delay:4000 }, // 添加下面这两个属性后,刷新后,轮播图才不会有样式问题 observer:true,//修改swiper自己或子元素时，自动初始化swiper observeParents:true,//修改swiper的父元素时，自动初始化swiper }, } } } //CSS <style scoped lang="less" type="text/less"> // 轮播图 .swiper-container{ width: 100%; height: 5.63rem; overflow: hidden; .swiper-wrapper { .swiper-slide { .swiper-img { width: 7.5rem; height: 5.63rem; } } } // 轮播图下面的分页器 .swiper-pagination{ width: 1rem; height: 0.54rem; background:rgba(11,3,6,0.7); border-radius: 0.27rem; font-size: 0.28rem; font-family:PingFang SC; font-weight:400; color:rgba(255,255,255,1); line-height: 0.54rem; text-align: center; left: unset; right: 0.3rem; } } </style> vue用来做移动端的,效果图如下:轮播–>案例二:直接引入官网的swiper
CSS
.b4_swiper{ width: 100%; height: 80%;display: flex; justify-content: center; align-items: center; margin-top: 60px; margin-bottom: 80px; position: relative; } .swiper-button-prev { width: 40px; height: 40px; background-image: url("本地图片"); background-size: contain; background-color: unset; } .swiper-button-next{ width: 40px; height: 40px; background-image: url("本地图片"); background-size: contain; background-color: unset; } .swiper-container .swiper-slide{ height: 236px; position: relative; } .swiper-icon{ width: 100%; height: 100%; } .swiper-text{ position: absolute; bottom: 0; width: 100%; height: 43px; background: #000000; opacity: 0.6; font-size: 17px; font-family: Source Han Sans SC; font-weight: 400; color: #FFFFFF; display: flex; justify-content: center; align-items: center; }UI页面布局:
<div class="b4_swiper"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img class="swiper-icon" src="图片地址" alt=""> <text class="swiper-text">123</text> </div> </div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div>jQuery
var mokeItem = ''; for(var i=0;i<mokeList.length;i++){ mokeItem += ` <div class="swiper-slide" > <img class="swiper-icon" src="${mokeList[i].imgUrl}" alt=""> <text class="swiper-text">${mokeList[i].goodsName}</text> </div> ` } $('.swiper-container').children().html(mokeItem); //mokeList:渲染需要的数据,我用的是mokeList:[{imgUrl:"",goodsName:""},这样类推...] //轮播: var swiper_moke = new Swiper('.swiper-container',{ navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, autoplay:{ disableOnInteraction: false,//手动轮播之后,不会自动轮播,要增加此属性 delay: 2500, }, loop : true, centeredSlides: true, centeredSlidesBounds: true, slidesPerView : 3, //显示3个slides出来:在我这里意思就是显示3个图出来 spaceBetween: 20, //间隔20px // 添加下面这两个属性后,刷新后,轮播图才不会有样式问题 observer:true,//修改swiper自己或子元素时，自动初始化swiper observeParents:true,//修改swiper的父元素时，自动初始化swiper });这个是PC端的效果图: 有问题,请评论,一起交流. 觉得写得不错的话,可点赞收藏哦!请我喝杯奶茶也可以,啊哈哈哈哈… 今天是1024,在这里祝大家节日快乐,永不加班…
