3回答

Dell

2020-12-03

滚动鼠标是什么意思，是自动滚动？

1

1

qq_蓝骏毅_04076633

就是自动滑动

2020-12-03

共1条回复

Dell

2020-12-04

看下package.json里面，swiper的版本是多少

0

0

qq_蓝骏毅_04076633

提问者

2020-12-02

<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>



</swiper>
</div>
</template>

<script>
export default {
name : 'HomeIcons',

props: {
list:Array
},

data () {
return {
swiperOption:{
autoplay: false
}
}
},

computed: {
pages() {
const pages = []
this.list.forEach(
(item,index) => {
const page = Math.floor(index / 8)

if(!pages [page]) {
pages[page] = []

}

pages[page].push(item)

})

return pages

}
}

}
</script>

<style scoped>

@import '~styles/varibles.styl'
 
/* 首页:图标区域逻辑实现 */
.icons >>> .swiper-container

height 0
padding-bottom 50%

//  width 100%
//  overflow hidden
//  height 0
//  padding-bottom 50%


.icons
margin-top .1rem

.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>

0

0