problem description
related codes
/ / Please paste the code text below (do not replace the code with pictures)
<template>
<div class="entertainmentList" v-if="isShow" v-show="isShow" @scroll.once="paperScroll">
<template v-for="(item, key) in listData">
<v-EntertainmentItem :key="key" :imgSrc="item.thumb" :price="item.price" :title="item.title" :message="item.area"
:phone="item.phone" :gps="item.gps"
>
<div class="bottomSolid" v-if="key < listData.length - 1"></div>
</v-EntertainmentItem>
</template>
<div class="loadPlane" v-show="!addChunked">
<v-Loadding></v-Loadding>
</div>
</div>
</template>
<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions, mapGetters } = createNamespacedHelpers(
"entertainment/buttons"
);
const entertainment = createNamespacedHelpers("entertainment");
const list = createNamespacedHelpers("entertainment/list");
import debounce from "lodash/debounce";
export default {
data() {
return {
msg: "Welcome to Your Vue.js App",
// Data : []
};
},
computed: {
// ...entertainment.mapGetters(["listData"]),
...list.mapState(["isShow"]),
...mapState(["current"]),
...entertainment.mapState(["addChunked", "chunk"]),
...entertainment.mapGetters(["listLoaded"]),
listData() {
var index = this.current;
var chunk = this.chunk[index];
console.log(chunk);
if (chunk) {
var result = [];
for (var i = 0; i < chunk.length; iPP) {
result = result.concat(chunk[i]);
}
return result;
}
},
},
methods: {
paperScroll: debounce(function(e) {
var dom = e.target;
var height = dom.offsetHeight;
var scrollTop = dom.scrollTop;
var scrollHeight = dom.scrollHeight;
if (scrollTop + height >= scrollHeight) {
this.add();
}
}, 300),
...entertainment.mapActions(["add"])
},
watch: {
},
mounted() {}
};
</script>I want to implement a list that can be loaded through ajax after sliding. Now the chunk in the state tree is better but not rendered to the view