<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, // 派發(fā)點擊事件? ? ? ? ? ? ? scrollY: true, // 滾動的方向為Y方向? ? ? ? ? ? ? probeType: 2 // 派發(fā)滾動事件? ? ? ? ? ? })? ? ? ? ? ? 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>