用了infinite-scroll,总是调不好,要不就是多出一个滚动条,要不就是报Uncaught TypeError: container.getBoundingClientRect is not a function的错误。请大家来看看,谢谢!
TagView.vue
`<template>
<div class="tags-view"
v-infinite-scroll="load"
infinite-scroll-disabled="disabled"
infinite-scroll-delay="1000"
infinite-scroll-distance="0"
infinite-scroll-immediate="false"
style="overflow:visible;">
<div class="tag-container">
<div class="tag-info" v-if="showTagInfo">
<h1 class="tag-name">{{tagname}}</h1>
<h2 class="tag-desc">{{tagdesc}}</h2>
</div>
</div>
<div>
<ul class="BookList" v-if="show">
<li v-for="item in list" :key="item.id" class="list-item">
<div class="BookItem">
<!-- <router-link :to="{ path: '/subject/' + item.id}"> -->
<div class="BookCoverWrapper BookItem-cover">
<div class="ImageWrapper">
<div class="sizeHodler" style="padding-top: 133.333%; background: #333;"></div>
![](item.nailthumb)
</div>
<div class="BookItem-title">
{{item.title}}
</div>
<div class="BookItem-authors">
{{item.creator}}
</div>
</div>
<!-- </router-link> -->
</div>
</li>
</ul>
</div>
<p v-if="noMore" style="margin-top:10px;font-size:13px;color:#ccc">没有更多了</p>
</div>
</template>
<style lang="less" scoped rel="stylesheet/less">
.tags-view {
width: 1000px;
margin: 20px auto;
.tag-container {
margin-left: 20px;
margin-right: 20px;
padding-top: 60px;
padding-bottom: 72px;
.tag-info {
.tag-name {
font-size: 46px;
font-weight: 700;
}
.tag-desc {
}
}
}
.BookList {
margin-left: 20px;
margin-right: 20px;
padding: 20px 0;
flex-wrap: wrap;
margin-bottom: -50px;
display: flex;
// height: 100%;
// height: 100vh - 178px;
// justify-content: space-between;
.list-item {
margin-bottom: 60px;
margin-right: 50px;
&:nth-child(5n) {
margin-right: 0;
}
.BookItem {
.BookCoverWrapper {
.ImageWrapper {
border-radius: inherit;
.sizeHodler {
border-radius: inherit;
background: #f0eff5;
}
.Image {
display: block;
max-width: 100%;
height: 200px;
}
}
.BookItem-authors {}
}
}
}
}
}
.ImageWrapper img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: inherit;
font-size: 12px;
color: #aaa;
white-space: nowrap;
text-overflow: ellipsis;
object-fit: cover;
overflow: hidden;
}
.BookItem {
width: 150px;
flex-shrink: 0;
font-size: 14px;
color: #8590a6;
}
.BookCoverWrapper {
position: relative;
flex-shrink: 0;
overflow: hidden;
border-radius: 6px;
}
.ImageWrapper {
position: relative;
flex-shrink: 0;
}
.BookItem-title {
position: relative;
margin-top: 14px;
margin-bottom: 9px;
font: -apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 22px;
color: #222;
}
.BookItem-authors {
margin-bottom: 12px;
line-height: 1;
}
</style>
<script>
// import API from '../api/api_book'
const stringRandom = require('string-random')
export default {
data () {
return {
list: [],
offset: 0,
limit: 30,
tagname: 'testonly',
tagdesc: 'testonly',
tid: null,
show: false,
showTagInfo: false,
loading: false,
noMore: false
}
},
beforeMount() {
this.init()
},
computed: {
disabled () {
return this.loading || this.noMore
}
},
methods: {
init() {
this.show = false
for (let i = 0; i < 30; i++) {
this.list[i] = {}
this.list[i].title = stringRandom(16)
this.list[i].nailthumb = ''
this.list[i].creator = stringRandom(5)
this.list[i].id = i
}
console.log(this.list)
this.offset = 30
this.show = true
},
load() {
this.show = false
console.log("in load")
this.loading = true
if (this.offset < 100) {
for (let i = 0; i < 30; i++) {
var obj = {}
obj.title = stringRandom(16)
obj.nailthumb = ''
obj.creator = stringRandom(5)
obj.id = i
this.list.push(obj)
}
this.show = true
this.loading = false
} else {
this.noMore = true
}
this.offset = this.offset + this.limit
}
}
}
</script>`