为了账号安全,请及时绑定邮箱和手机立即绑定

Vue + Vue-resource + better-scroll 添加滚动时只能滚动一半是什么问题????

Vue + Vue-resource + better-scroll 添加滚动时只能滚动一半是什么问题????

qq_木头人_19 2018-07-18 18:08:56
<template>  <div class="content" ref="content">    <div class="content-box">      <div class="news-pages" :key="item.id" v-for="(item, index) in items" @click="abc(index)">        <news-one v-if="index % 2 == 0" :news="item"></news-one>        <news-two v-if="index % 2 == 1" :news="item"></news-two>      </div>      <p v-show="isShow" style='text-align: center'>正在加载中...</p>    </div>  </div></template><script>import BScroll from 'better-scroll'import bus from '../../assets/js/event.js'import newsOne from '../news/news-one'import newsTwo from '../news/news-two'export default {  data () {    return {      items: [],      toggle: true,      dom: '',      isShow: false    }  },  methods: {    receive () {      let self = this      bus.$on('onchange', function (i) {        // 设置滚动位置默认为顶部        self.scrollContent.scrollTo(0, 0)        self.sendRequest(i)      })    },    sendRequest (i) {      this.$http.get('../../../static/data.json').then((res) => {        this.items = res.data[i] // 获取请求数据        if (!this.scrollContent) {          setTimeout(() => {            this.scrollContent = new BScroll(this.$refs.content, {              click: true, // 派发点击事件              scrollY: true, // 滚动的方向为Y方向              probeType: 2 // 派发滚动事件            })            console.log(this.scrollContent.maxScrollY)            this.scrollContent.on('scroll', (pos) => {              if (((pos.y + 50) <= this.scrollContent.maxScrollY) && this.toggle) {                this.loadings()                console.log(this.scrollContent.maxScrollY)              }            })          }, 20)        } else {          this.scrollContent.refresh()        }      })    },    loadings () {      if (!this.toggle) return      this.$http.get('../../../static/data.json', {        before () {          this.toggle = false          this.isShow = true        }      }).then((res) => {        this.items = this.items.concat(res.data[1])        setTimeout(() => {          this.scrollContent.refresh()        }, 20)        setTimeout(() => {          this.toggle = true          this.isShow = false        }, 600)      })    },  },  created () {    this.sendRequest(0) // 初始数据为第一页  },  mounted () {    this.receive()  },  updated () {  },  components: {    'news-one': newsOne,    'news-two': newsTwo  }}</script><style scoped>  .content    width: 100%    .content-box      height: auto</style>
查看完整描述

1 回答

  • 1 回答
  • 1 关注
  • 1332 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信