页面swiper里面第一块只显示了4个，滑到第二块显示2个，应该是显示宽度750的原因，但不知道为什么
来源：7-6 Vue项目首页 - 图标区域逻辑实现
Candy__2026
2022-08-02
<template>
<div class="wrapper">
<div class="swiper-wrapper">
<swiper :options="swiperOptions">
<swiper-slide v-for="(page,index) in pages"
:key="index">
<div class="icons-item"
v-for="item in page"
:key="item.id">
<img class="swiper-img"
:src="item.iconUrl"
alt="">
<p class="swiper-desc">{{item.desc}}</p>
</div>
</swiper-slide>
</swiper>
</div>
</div>
</template>
<script>
export default {
name: 'IconsView',
data () {
return {
swiperOptions: {},
iconsList: [
{
id: '0001',
iconUrl: 'https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/ticket.png',
desc: '门票/活动'
},
{
id: '0002',
iconUrl: 'https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/bus_ticket.png',
desc: '汽车/船票'
},
{
id: '0003',
iconUrl: 'https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/flight_package.png',
desc: '机票/酒店'
},
{
id: '0004',
iconUrl: 'https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/hotel_inn.png',
desc: '民宿/客栈'
},
{
id: '0005',
iconUrl: 'https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/food.png',
desc: '美食'
},
{
id: '0006',
iconUrl: 'https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/weekend.png',
desc: '周边游'
},
{
id: '0007',
iconUrl: 'https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/car.png',
desc: '租车'
},
{
id: '0008',
iconUrl: 'https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/airport_transfer.png',
desc: '接送机/包车'
},
{
id: '0009',
iconUrl: 'https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/shop.png',
desc: '购物/免税'
},
{
id: '0010',
iconUrl: 'https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/hotel_sale.png',
desc: '特价/爆款'
}
]
}
},
computed: {
pages () {
const pages = []
this.iconsList.forEach((item, index) => {
const page = Math.floor(index / 8)
console.log(page)
if (!pages[page]) {
pages[page] = []
}
pages[page].push(item)
})
return pages
}
}
}
</script>
<style lang="scss" scoped>
.wrapper {
.icons-item {
width: 25%;
float: left;
text-align: center;
}
.swiper-img {
width: 60%;
display: block;
margin: 0px auto;
max-width: 84px;
max-height: 84px;
}
.swiper-desc {
padding: 0px 0.12rem;
margin-bottom: 0.12rem;
}
}
</style>
1回答
-
这块大概率是你这边列表布局的 css 的代码编写有问题，你把那块的样式调整下，宽高写一写，图片的宽高设置下。
012022-08-08
相似问题