Javascript Vue firebase查询：如何使用无限加载显示下一个结果？
我正在创建食品订购系统。我正在构建订单历史页面，并尝试实现无限加载 我想在每次按下“下一步”按钮时显示接下来的五个结果 每五个结果必须按降序返回。列名是在处创建的 现在的问题是，如果我按下下一步按钮一次，我可以看到第六到第十个结果 但如果我再次按下按钮，我会看到第六到第十个结果 每次我按下“下一步”按钮，同样的事情一次又一次地发生 我想我需要在我的方法中使用for循环。但我不知道如何解决这个问题 我在方法中使用firebase查询 我的代码：Javascript Vue firebase查询：如何使用无限加载显示下一个结果？,javascript,firebase,vue.js,for-loop,google-cloud-firestore,Javascript,Firebase,Vue.js,For Loop,Google Cloud Firestore,我正在创建食品订购系统。我正在构建订单历史页面，并尝试实现无限加载 我想在每次按下“下一步”按钮时显示接下来的五个结果 每五个结果必须按降序返回。列名是在处创建的 现在的问题是，如果我按下下一步按钮一次，我可以看到第六到第十个结果 但如果我再次按下按钮，我会看到第六到第十个结果 每次我按下“下一步”按钮，同样的事情一次又一次地发生 我想我需要在我的方法中使用for循环。但我不知道如何解决这个问题 我在方法中使用firebase查询 我的代码： <template> <d
<template>
<div>
<NavbarMobile />
<CartSmartphone class="mb-5" />
<b-container class="history-mobile">
<b-row class="mb-2 orders">
<span class="ml-2 orders">Your orders</span>
</b-row>
<div class="user-section d-flex " v-for="(item, index) in history" :key="index">
<div v-if="item.status == 'processing'" class="card-area">
<div class=" mb-3" v-for="(sample, index) in item.sample" :key="index">
<router-link :to="{name:'OrderSmartphone',params:{id: item.code}}">
<b-card :img-src="sample" img-alt="Card image" img-left class="mb-3">
<b-card-text class="text">
<!-- Some quick example text to build on the card and make up the bulk of the card's content. -->
<ul class="list-unstyled">
<b-row tag="li">
<span class="shop">{{ item.business }}</span>
</b-row>
<div cols="12" class="d-flex my-3">
<span class="date">{{ item.day }}/{{ item.month }}/{{ item.year}}</span>
<span class="status">{{ item.status }}</span>
</div>
<b-row class="my-3">
<span class="price">{{ item.sale }}</span>
</b-row>
</ul>
</b-card-text>
</b-card>
</router-link>
</div>
</div>
<div v-else class="card-area">
<div class="card-area mb-3" v-for="(sample, index) in item.sample" :key="index">
<b-card :img-src="sample" img-alt="Card image" img-left class="mb-3">
<b-card-text class="text">
<!-- Some quick example text to build on the card and make up the bulk of the card's content. -->
<ul class="list-unstyled">
<b-row tag="li">
<span class="shop">{{ item.business }}</span>
</b-row>
<div cols="12" class="d-flex my-3">
<span class="date">{{ item.day }}/{{ item.month }}/{{ item.year}}</span>
<span class="status">{{ item.status }}</span>
</div>
<b-row class="my-3">
<span class="price">{{ item.sale }}</span>
</b-row>
</ul>
</b-card-text>
</b-card>
</div>
</div>
<div class="arrow-area">
<div class="svg">
<svg xmlns="http://www.w3.org/2000/svg" width="5.126" height="9.313" viewBox="0 0 5.126 9.313">
<g id="download" transform="translate(-116.995 9.036) rotate(-90)">
<path id="パス_390" data-name="パス 390" d="M8.452,117.33,4.4,121.385.344,117.33a.19.19,0,0,0-.269.269l4.189,4.189a.19.19,0,0,0,.269,0L8.722,117.6a.19.19,0,0,0-.265-.274l0,0Z" transform="translate(-0.021 0)" fill="#fff" stroke="#fff" stroke-width="0.5"/>
<path id="パス_391" data-name="パス 391" d="M4.377,121.845a.19.19,0,0,1-.135-.056L.053,117.6a.19.19,0,0,1,.269-.269l4.055,4.054,4.054-4.055a.19.19,0,0,1,.274.265l0,0-4.189,4.189A.19.19,0,0,1,4.377,121.845Z" transform="translate(0 -0.001)" fill="#fff" stroke="#fff" stroke-width="0.5"/>
</g>
</svg>
</div>
</div>
</div>
</b-container>
<b-button @click.prevent="nextPage" class="next">next</b-button>
<FooterMobile />
</div>
</template>
<script>
import CartSmartphone from "@/mobile/CartSmartphone.vue";
import NavbarMobile from "@/components/NavbarMobile.vue";
import FooterMobile from "@/sections/FooterMobile.vue";
import fireApp from '@/plugins/firebase'
const firebase = require("firebase");
require("firebase/firestore");
const db = firebase.firestore();
export default {
name: 'UserSmartphone',
components: {
CartSmartphone,
NavbarMobile,
FooterMobile
},
data() {
return {
customer: this.$route.params.id,
history: [],
sample: ""
}
},
mounted() {
// const customerId = this.$route.params.id
// this.customer = customerId
const dbOrdersRef = db.collection('OrdersUser').doc(this.$route.params.id).collection('Orders').orderBy("created_at", "desc").limit(5)
dbOrdersRef.onSnapshot((querySnapshot) => {
querySnapshot.forEach((doc) => {
const historyData = doc.data()
this.history.push(historyData)
this.sample = doc.data().sample
})
})
},
methods: {
nextPage() {
fireApp.auth().onAuthStateChanged((user) => {
if (user) {
const userId = fireApp.auth().currentUser.uid;
const first = db.collection('OrdersUser').doc(userId).collection('Orders').orderBy("created_at", "desc").limit(5)
return first.onSnapshot((querySnapshot) => {
// Construct a new query starting at this document,
// get the next 5 results.
var lastVisible = querySnapshot.docs[querySnapshot.docs.length - 1];
console.log("last", lastVisible);
var next = db.collection('OrdersUser').doc(userId).collection('Orders').orderBy("created_at", "desc")
.startAfter(lastVisible)
.limit(5);
next.onSnapshot((nextQuery) => {
nextQuery.forEach((doc) => {
const nextData = doc.data()
console.log(nextData)
this.history.push(nextData)
})
})
});
}
})
},
}
}
</script>
你的命令
{{item.business}}
{{item.day}/{{item.month}/{{item.year}
{{item.status}
{{item.sale}
{{item.business}}
{{item.day}/{{item.month}/{{item.year}
{{item.status}
{{item.sale}
下一个
从“@/mobile/CartSmartphone.vue”导入CartSmartphone；
从“@/components/NavbarMobile.vue”导入NavbarMobile；
从“@/sections/FooterMobile.vue”导入FooterMobile；
从“@/plugins/firebase”导入fireApp
const firebase=require（“firebase”）；
要求（“消防基地/消防仓库”）；
const db=firebase.firestore（）；
导出默认值{
名称：“用户智能手机”，
组成部分：{
智能手机，
NavbarMobile，
页脚移动
},
数据（）{
返回{
顾客：这是$route.params.id，
历史：[]，
样本：“
}
},
安装的（）{
//const customerId=this.$route.params.id
//this.customer=customerId
const dbOrdersRef=db.collection（'OrdersUser'）.doc（this.$route.params.id）。collection（'Orders'）。orderBy（“created_at”，“desc”）。limit（5）
dbOrdersRef.onSnapshot（（querySnapshot）=>{
querySnapshot.forEach（（doc）=>{
常量historyData=doc.data（）
this.history.push（historyData）
this.sample=doc.data（）.sample
})
})
},
方法：{
下一页（）{
fireApp.auth（）.onAuthStateChanged（（用户）=>{
如果（用户）{
const userId=fireApp.auth（）.currentUser.uid；
const first=db.collection（'OrdersUser'）.doc（userId）。collection（'Orders'）。orderBy（“created_at”，“desc”）。limit（5）
首先返回。onSnapshot（（querySnapshot）=>{
//从该文档开始构造一个新查询，
//获得接下来的5个结果。
var lastVisible=querySnapshot.docs[querySnapshot.docs.length-1]；
log（“last”，lastVisible）；
var next=db.collection（'OrdersUser'）.doc（userId）.collection（'Orders'）.orderBy（“创建于”，“描述”）
.startAfter（最后可见）
.限额（5）；
next.onSnapshot（（nextQuery）=>{
nextQuery.forEach（（doc）=>{
const nextData=doc.data（）
console.log（nextData）
this.history.push（nextData）
})
})
});
}
})
},
}
}
OrdersUserhistory然后，我使用for循环在模板部分显示结果。您没有设置最后一个可见文档
const dbOrdersRef = db.collection('OrdersUser').doc(this.$route.params.id)
.collection('Orders').orderBy("created_at", "desc").limit(5);
dbOrdersRef.onSnapshot((querySnapshot) => {
querySnapshot.forEach((doc) => {
const historyData = doc.data()
this.history.push(historyData)
this.sample = doc.data().sample
})
this.lastVisible = querySnapshot.docs[querySnapshot.docs.length-1];
})
nextPage() {
fireApp.auth().onAuthStateChanged((user) => {
if (user) {
const userId = fireApp.auth().currentUser.uid;
const next = db.collection('OrdersUser')
.doc(userId)
.collection('Orders')
.orderBy("created_at", "desc")
.startAfter(this.lastVisible)
.limit(5);
return next.onSnapshot((nextQuery) => {
nextQuery.forEach((doc) => {
const nextData = doc.data()
console.log(nextData)
this.history.push(nextData)
})
this.lastVisible = nextQuery.docs[nextQuery.docs.length-1];
})
};
})
}
data() {
return {
customer: this.$route.params.id,
history: [],
sample: "",
lastVisible: ""
}
},