轮播图
长这样: 对应sob的
分析
怎么实现这个效果,首先去nutui,它里面有一个轮播图组件
https://nutui.jd.com/2x/#/swiper
就是它了。
<nut-swiper
direction="horizontal"
:loop="true"
:canDragging="false"
:paginationVisible="true"
ref="demo3"
>
<div class="nut-swiper-slide gray" >
<span>page 1</span>
</div>
<div class="nut-swiper-slide gray_1" >
<span>page 2</span>
</div>
<div class="nut-swiper-slide gray" >
<span>page 3</span>
</div>
<div class="nut-swiper-slide gray_1" >
<span>page 4</span>
</div>
</nut-swiper>
<br/>
直接放到页面,就可以展示基本的效果了。
我们分析下它的结构,外层是nut-swiper,内层是一个div,所有内容都放到此div中。
所以我们在这个div里面放一个img,同时要去css中设置图片的宽度为100%
nut-swiper的高度也需要定义好。
数据
结构写好接下来就是请求数据,
接口地址是 /ast/home/loop/list。
当你请求时,你会发现,这个数据好像没有id。没有id我们就不好遍历,所以需要手动给每个数据加上id属性
用到一个库 nanoid,
安装 npm i install
导入:
import {nanoid} from 'nanoid'
使用直接调用 let id = nanoid()
data中初始化loopList变量,然后methods中创建方法
/**
* 获得轮播图数据
* @returns {Promise<void>}
*/
async getLoopList() {
let result = await api.getLoopList()
//遍历加上id
for (let i = 0; i < result.data.length; i++) {
result.data[i].id = nanoid()
}
this.loopList = result.data
},
遍历
数据有了之后,就直接到页面上去遍历,代码如下:
<!--轮播图,仅为推荐页面时使用-->
<nut-swiper
v-show="currentTag==-1"
:autoPlay="2000"
direction="horizontal"
:loop="true"
:canDragging="false"
:paginationVisible="true"
:swiperData="loopList"
ref="demo3"
>
<div class="nut-swiper-slide" v-for="item in loopList" :key="item.id">
<img :src="item.picUrl" class="swiperImg" alt="">
</div>
</nut-swiper>
就可以看到最终效果了