<div v-else class="cardLists" v-load-more="loadMore">
<a-row :gutter="16">
<a-col :span="8" v-for="(item, idx) in list" :key="idx">
<a-card :bordered="true">
<span slot="title">
{{ hosData[idx].hospitalCode + ' ' + hosData[idx].hospitalName }}
</span>
<span slot="extra">
<a-button
type="link"
@click="onClick(hosData[idx].hospitalName, hosData[idx].hospitalCode, $event)">
筛查
</a-button>
</span>
<span class="n-Level" :class="nameMap[hosData[idx].hospitalLevel]">
<span>{{ hosData[idx].hospitalLevel }}</span>
</span>
<a-descriptions>
<a-descriptions-item label='结算数据'>
{{ hosData[idx].hisCount }}
</a-descriptions-item>
</a-descriptions>
</a-card>
</a-col>
</a-row>
</div>
export default {
computed: {
list: {
get() {
if(this.hosData.length < 30) {
return this.hosData.length
} else {
return 30
}
},
set(newVal) {
console.log('newVal:');
console.log(newVal);
return newVal
}
}
},
directives: {
/* 通过判断 滚动距离 >= 子级高度 - 自身高度,如果为true则认为到达底部 */
loadMore: {
inserted(el, binding) {
const scrollFn = () => {
// 子级高度
let scrollH = 0;
$(el).children().each((idx, item) => {
scrollH += $(item).get(0).offsetHeight
});
let wrapH = $(el).height(); // 自身高度
let scrollT = $(el).scrollTop(); // 滚动距离
let isBottom = scrollT >= scrollH - wrapH;
if (isBottom) {
binding.value && binding.value()
}
};
$(el).on('scroll', _.throttle(scrollFn, 500))
}
}
},
methods: {
loadMore() {
console.log("this.list:");
console.log(this.list);
this.list += 30;
}
}
}
set(newVal) {
console.log('newVal:');
console.log(newVal);
list = newVal
}
结果会报错
设置值的时候 只是会调用set方法 但是你获取到的list 始终是get方法的放回值 比如说 this.list = 100;但是你的hosdata的长度大于30,那么取list的值的时候,结果是30;
按照你这个写法,你的list永远都是一个固定的值。看了你的代码,你应该是要做一个滚动加载的。
定义一个当前页pageIndex, 每页大小pageSize,直接循环你的hosData,循环的时候判断v-if="idx < pageIndex * pageSize",滚动的回调里面pageIndex ++ 就好了。
data(){
return{
list:[]
}
},
你缺少了data吧 把这个加上去