图标滑动组件设计-优快云博客

本文链接：https://blog.youkuaiyun.com/Seven_drunk/article/details/98501426

本文介绍了一种基于Vue.js的图标滑动组件实现方案，通过将大量图标分页展示，提高了用户界面的交互性和视觉效果。组件利用了swiper插件进行滑动切换，并通过计算属性动态调整每页显示的图标数量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
	<div class="icons">
		<swiper>
			<swiper-slide v-for="(page,index) of pages" :key="index">
				<div class="icon" v-for="item of page" :key="item.id">
					<div class="icon-img">
						<img class="icon-img-content" :src="item.imgUrl">
					</div>
					<p>{{item.desc}}</p>
				</div>
			</swiper-slide>
		</swiper>
	</div>
</template>
<script>
export default{
	name:'HomeIcons',
	data(){
		return{
			iconList:[{
				id:'0001',
				imgUrl:'static/images/flight.png',
				desc:'机票'
			},{
				id:'0002',
				imgUrl:'static/images/freeTravel.png',
				desc:'自由行'
			},{
				id:'0003',
				imgUrl:'static/images/package.png',
				desc:'度假'
			},{
				id:'0004',
				imgUrl:'static/images/kezhan.png',
				desc:'客栈'
			},{
				id:'0005',
				imgUrl:'static/images/piao.png',
				desc:'景点门票'
			},{
				id:'0006',
				imgUrl:'static/images/train.png',
				desc:'火车票'
			},{
				id:'0007',
				imgUrl:'static/images/travel.png',
				desc:'攻略'
			},{
				id:'0008',
				imgUrl:'static/images/hotel.png',
				desc:'酒店'
			},{
				id:'00009',
				imgUrl:'static/images/hotel.png',
				desc:'酒店'
			}
			]
		}
	},
	computed:{
		pages:function(){
			const pages=[]
			this.iconList.forEach((item,index)=>{
				const page=Math.floor(index/8)
				if(!pages[page]){
					pages[page]=[]
				}
				pages[page].push(item)
			})
			return pages
		}
	}
}
</script>
<style lang="stylus" scoped>
	.icons >>> .swiper-container
		height:0
		padding-bottom:50%
	.icons
		margin-top:0.2rem
		margin-left:0.6rem
		.icon
			position:relative
			float:left
			width:25%
			height:0.3rem
			padding-bottom:1.5rem
			.icon-img
				position:absolute
				top:0
				left:0
				.icon-img-content
					width:.8rem
					height:.8rem
		.icon p
			position:absolute
			top:1rem
</style>在这里插入图片描述

在这里插入图片描述