better-scroll 问题
发布于 7 年前 作者 308208549 1738 次浏览 最后一次编辑是 7 年前 来自 问答
粉丝福利 : 关注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>
回到顶部