web前端的学习日志（7）

最新推荐文章于 2025-10-06 14:24:37 发布

原创最新推荐文章于 2025-10-06 14:24:37 发布 · 461 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了一个使用Vue.js实现的轮播图组件案例，该组件能够展示多个图标，并通过分页进行滑动切换。文章详细展示了组件的模板结构、数据绑定及样式设置。

Vue.js的学习过程

第七天的学习

（毕设中期答辩完了，感觉春招招人好少啊，投了好多家公司都还没回馈，迷茫。。。）

一、

<template>
	<div class="icons">
		<swiper :options="swiperOption">
			<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 class='icon-desc'>{{item.desc}}</p>
				</div>
			</swiper-slide>
			<div class="swiper-pagination"  slot="pagination"></div>
		</swiper>
	</div>
</template>

<script>
export default {
	name: 'HomeIcons',
	data () {
		return {
			swiperOption: {
					pagination: '.swiper-pagination',
					loop: true
				},
			iconList: [{
				id: '0001',
				imgUrl: 'https://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png',
				desc: '景点门票'
			},{
				id: '0002',
				imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/3e/86314b2af03b7502.png',
				desc: '景点门票'
			},{
				id: '0003',
				imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/95/8246f27355943202.png',
				desc: '景点门票'
			},{
				id: '0004',
				imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/75/eca3ce656c886502.png',
				desc: '景点门票'
			},{
				id: '0005',
				imgUrl: 'https://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png',
				desc: '景点门票'
			},{
				id: '0006',
				imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/3e/86314b2af03b7502.png',
				desc: '景点门票'
			},{
				id: '0007',
				imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/95/8246f27355943202.png',
				desc: '景点门票'
			},{
				id: '0008',
				imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/75/eca3ce656c886502.png',
				desc: '景点门票'
			},{
				id: '0009',
				imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/75/eca3ce656c886502.png',
				desc: '景点门票'
			}]
		}
	},
	computed: {
		pages () {
			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>
	@import '~@/assets/styles/varibles.styl'
	@import '~@/assets/styles/mixins.styl'
	.icons >>> .swiper-container
		height: 0
		padding-bottom: 50%
	.icon
		position: relative
		overflow: hidden
		float: left
		width: 25%
		height: 0
		padding-bottom: 25%
		.icon-img
			position: absolute
			top: 0
			left: 0
			right: 0
			bottom: .44rem
			box-sizing: border-box
			padding: .1rem
			.icon-img-content
				display: block
				margin: 0 auto
				height: 100%
		.icon-desc
			position: absolute
			left: 0
			right: 0
			bottom: 0
			height: .44rem
			line-height: .44rem
			text-align: center
			color: $darkTextColor
			ellipsis()
</style>