<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>
添加回答
举报
0/150
提交
取消