Still understanding, simply write it first.
Ideas:
1. Install the plug-in npm install vue-infinite-loading
2. Import the plug-in import InfiniteLoading from'vue-infinite-loading'
3. Register the components: {InfiniteLoading},
4. After the v-for loop is finished, call it.
<li v-for="(item,uniquekey) in list" :key="uniquekey">
<div class="img"><img v-lazy="item.thumbnail_pic_s"></div>
<div class="fl" style="width:65%;">
<div class="tit">{
{
item.title}}</div>
<p>作者：{
{
item.author_name}}</p>
<p>来源于：{
{
item.category}}-{
{
item.uniquekey}}</p>
</div>
</li>
</ul>
<infinite-loading :identifier="infiniteId" @infinite="infiniteHandler"></infinite-loading>
5. Create a function in data
data(){
return{
page: 1,
list: [], //数据列表
newsType: 'story',
infiniteId: +new Date(),
}
},
6. The business logic is directly coded, but I don't understand it yet. Is seeking to learn other loading methods. Like the following method, repeating content is loaded in an infinite loop.
methods:{
infiniteHandler($state) {
this.$axios
.get('../static/data/news.json', {
params: {
page: this.page,
tags: this.newsType,
},
}).then(({
data }) => {
if (data.result.data.length) {
this.page += 1;
this.list.push(...data.result.data);
$state.loaded();
} else {
$state.complete();
}
});
},
changeType() {
this.page = 1;
this.list = [];
this.infiniteId += 1;
},
7, the end