vue中首页推荐栏有多个小图标自动换页并且轮播的学习笔记
在模仿去哪儿APP开发中,首页有两个轮播,第一个是banner图的轮播,利用axios从服务端获取链接,然后swiper自动轮播.
相对来说是一个比较普通的一个轮播界面.
现在要做记录的是banner图下面的导航栏的轮播,在一个大的盒子里面有十几个小盒子
而大盒子布局只能在一页中显示8个小盒子
剩下的小盒子就要按照排列自动排到第二页,这个通过CSS可以很容易实现
但是重点是让这个大盒子,能够自动轮播
下面是一个组件里的盒子代码,需要将数据循环放到各个小盒子里,包括(imgUrl 和desc)
在CSS中设定了每一页只能放置8个小盒子,当需要放置的盒子有10个甚至更多,会出现两页,让这两页轮播.
<template>
<div class="icons">
<swiper>
<swiper-slide v-for="(page, index) in pages" :key="index">
<div class="icon" v
最低0.47元/天 解锁文章
2299
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
