使用了有赞vant ui库轮播组件
<template>
<div class="icons">
<van-swipe :loop="false" indicator-color="#fff">
<van-swipe-item v-for="(page, index) in pages" :key="index">
<div class="icon" >
<a href="javascript:;" class="a-icon" v-for="item of page" :key="item.id">
<img class="icon-img" :src="item.imgUrl" alt>
<p class="icon-keywords">{
{item.desc}}</p>
</a>
</div>
</van-swipe-item>
</van-swipe>
</div>
</template>
<script>
export default {
name: "icons",
data() {
return {
iconList: [
{
id: "0001",
aHref: "",
imgUrl:
"http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
desc: "景点门票"