better-scroll 问题
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利
我在豆瓣电影上拉的数据,一共二十条,可是页面刚进去的时候那个滑动框里面只能拉到第八个数据左右,然后就拉不下去了。我用浏览器看了代码,数据都是有加载进去了的。可是我只要在页面里面进入其他路由页面,然后再回来原来那个页面,一下就恢复正常,可是网页第一次进去的时候还是会出现那种情况。 我试过一次只获取五条数据,可是还是会出现这种情况。(显示页面只够显示四条数据) 下面是我的相关代码 求求大神帮我看下。
<template>
<div class="hit" ref="hitWrapper">
<div class="hit-wrapper">
<ul>
<li v-for="item in hitMovie" class="hit-list">
<div class="icon">
<img :src="item.images.small">
</div>
<div class="content">
<h2 class="name">{{item.title}}</h2>
</div>
</li>
</ul>
</div>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
props: {
},
data () {
return {
hitMovie: []
}
},
created () {
this.$http.jsonp('https://api.douban.com/v2/movie/in_theaters').then((response) => {
response = response.body
this.hitMovie = response.subjects
this.$nextTick(function () {
this.hitScroll = new BScroll(this.$refs.hitWrapper, {
click: true
})
})
}, response => {
// error callback
})
}
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
.hit
position: absolute
top: 40px
bottom: 50px
width: 100%
overflow: hidden
.hit-wrapper
.hit-list
display: flex
padding: 18px 14px
border-bottom: 1px solid rgba(7, 17, 27, 0.1)
.icon
flex: 0 0 60
.content
flex: 1
.name
margin-left: 14px
font-size: 14px
</style>