<template>
<div class="demo-infinite-container" :style="{height:screenHeight-312+'px'}">
<mu-list v-color="{screenHeight:screenHeight,set_more:set_more}">
<template v-for="newst in newsts">
<mu-list-item :title="newst.title" />
<mu-divider/>
</template>
</mu-list>
<p @click="get_newst_news()" class="mu-item" v-show="more" style="margin: 0px;">查看更多</p>
<mu-infinite-scroll :scroller="scroller" :loading="loading" @load="get_newst_news" />
</div>
</template>
<script>
export default {
data() {
const list = []
for(let i = 0; i < 10; i++) {
list.push('item' + (i + 1))
}
return {
color: "red",
list,
num: 10,
loading: false,
scroller: null,
newsts: [{
title: 'aa'
}, {
title: 'bb'
}],
screenHeight: window.screen.height,
more: false
}
},
mounted() {
this.scroller = this.$el;
this.get_screen_height();
this.get_newst_news();
this.$nextTick(() => {
console.log($('.mu-list').offsetHeight)
})
},
directives: {
color: {
update: function(el, binding, v) {
$(el).addClass('red')
el.offsetHeight
setTimeout(function() {
console.log(el.offsetHeight)
console.log(binding.value.screenHeight - 312)
if(el.offsetHeight < binding.value.screenHeight - 312) {
binding.value.set_more(true)
} else(
binding.value.set_more(false)
)
}, 0)
console.log(el.offsetHeight)
console.log(binding)
console.log(v)
}
}
},
methods: {
get_screen_height() {
var self = this;
window.addEventListener("resize", function() {
console.log(window.screen.height)
self.screenHeight = window.screen.height;
})
},
set_more(bool) {
console.log("set_more", bool)
this.more = bool
},
loadMore() {
this.loading = true
setTimeout(() => {
for(let i = this.num; i < this.num + 10; i++) {
this.list.push('item' + (i + 1))
}
this.num += 10
this.loading = false
}, 2000)
},
get_newst_news() {
this.loading = true
var self = this;
$.ajax({
type: 'GET',
url: 'http://localhost:81/vue-news/vue/newsts.php',
dataType: 'jsonp',
jsonpCallback: 'GET_NEWST',
success: function(data) {
console.log(data)
self.newsts = self.newsts.concat(data.list)
self.loading = false
}
})
}
}
}
</script>
<style lang="css">
.demo-infinite-container {
width: 100%;
/*height: 300px;*/
overflow: auto;
-webkit-overflow-scrolling: touch;
/*border: 1px solid #d9d9d9;*/
}
</style>
