老师,我在图标区域加了pagination小点,但是没有显示,是什么原因啊
来源:7-6 Vue项目首页 - 图标区域逻辑实现
慕粉1474714611
2020-09-05
<template>
<div class="icons">
<swiper>
<swiper-slide v-for="(page, index) of pages" :key="index" :options="swiperOption">
<div class="icon" v-for="item of page" :key="item.id">
<div class="icon-img">
<img class="icon-img-content" :src="item.imgUrl" />
</div>
<div class="icon-desc">{{item.desc}}</div>
</div>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
export default {
name: 'homeIcons',
data () {
return {
swiperOption: {
loop: true,
pagination: '.swiper-pagination',
paginationClickable: true, // 可点击分页器小点
autoplay: 3000, // 自动切换间隔 3s
autoplayDisableOnInteraction: false // 鼠标触碰后,不会停止自动切换
},
iconsList: [{
id: '001',
imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20209/158387fe5376294f3776d01358d6b73b.png',
desc: '景点门票1'
}, {
id: '002',
imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20209/158387fe5376294f3776d01358d6b73b.png',
desc: '景点门票2'
}, {
id: '003',
imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20209/158387fe5376294f3776d01358d6b73b.png',
desc: '景点门票3'
}, {
id: '004',
imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20209/158387fe5376294f3776d01358d6b73b.png',
desc: '景点门票4'
}, {
id: '005',
imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20209/158387fe5376294f3776d01358d6b73b.png',
desc: '景点门票5'
}, {
id: '006',
imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20209/158387fe5376294f3776d01358d6b73b.png',
desc: '景点门票6'
}, {
id: '007',
imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20209/158387fe5376294f3776d01358d6b73b.png',
desc: '景点门票7'
}, {
id: '008',
imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20209/158387fe5376294f3776d01358d6b73b.png',
desc: '景点门票8'
}, {
id: '009',
imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20209/158387fe5376294f3776d01358d6b73b.png',
desc: '景点门票9'
}, {
id: '010',
imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20209/158387fe5376294f3776d01358d6b73b.png',
desc: '景点门票10'
}]
}
},
computed: {// 将iconsList数组变为 二维数组pages
pages () {
const pages = []
this.iconsList.forEach((elem, index) => {
const page = Math.floor(index / 8)
if (!pages[page]) {
pages[page] = []
}
pages[page].push(elem)
})
return pages
}
}
}
</script>
<style lang="stylus" scoped>
.icons >>> .swiper-container
width: 100%
height: 0
padding-bottom: 50%
.icons >>> .swiper-slide
display: flex
flex-flow: row wrap
.icons
overflow: hidden
width: 100%
height: 0
padding-bottom: 50%
display: flex
flex-flow: row wrap
background: #eeeeee
.icon
overflow: hidden
width: 25%
height: 0
padding-bottom: 25%
position: relative
.icon-img
position: absolute
left: 0
top: 0
bottom: .44rem
box-sizing: border-box
padding: .1rem
width: 100%
overflow: hidden
.icon-img-content
height: 100%
margin: 0 auto
display: block
.icon-desc
width: 100%
height: .44rem
position: absolute
left: 0
bottom: 0
text-align: center
</style>
写回答
1回答
-
Dell
2020-09-06
同学你好,这个问题好多同学好像都有,辛苦加我微信dell-js,把你的代码弄个压缩文件包发我,我本地调试看一下
152021-04-18
相似问题