<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>
相关分类