离子无限卷轴发射极少
Posted
技术标签:
【中文标题】离子无限卷轴发射极少【英文标题】：ion-infinite-scroll firing extremely infrequently 【发布时间】：2018-04-24 21:39:53 【问题描述】：我正在尝试让ionInfiniteScroll 工作 - 我已经让它在我的应用程序的其他几个地方工作，这个页面实际上与另一个工作正常的页面几乎相同。当我向下滚动时，没有任何反应，没有加载图形。我的 doInfinite 方法内部有一条控制台消息，它永远不会执行......所以 doInfinite 代码永远不会执行。我在想html结构可能有问题，因为该方法没有执行：
<ion-content no-padding>
<div (swipeLeft)="swipeLeft()" (swipeRight)="toFull()"> <!--(swipeRight)="toProfile()"-->
...
<div class ='weeklydeals contentone' #weeklydeals [@moveList]='moveState'>
<ion-list class="marginstatus" no-padding>
<ion-item *ngFor="let a of promotions" no-padding>
<div class="feedtoptextcontainer">
<!--<div class="imageparent">
<img class="postprofilepic" src="a.url">
</div>-->
<div class="usernamecontainer">
<h4 class="postusername">@a.username</h4><br>
</div>
<h3 class="promotitle">a.title</h3>
<div class="desccontainer">
<h4 class="deal">a.caption</h4>
</div>
</div>
<!--<img class="imagepost" src="i">-->
</ion-item>
</ion-list>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</div>
...
<ion-item class="noavail" #noavail no-padding no-lines>NO RESULTS</ion-item>
</div>
doInfinite 方法代码：
doInfinite(infiniteScroll)
console.log("in doinfinite promotionsssssss");
setTimeout(() =>
console.log('Begin async operation');
/*console.log(this.content.directionY + " upupupupupupu********");
if(this.content.directionY == 'up')
this.show = false
else
this.show = true;
*/
console.log(this.startAtKey1 + " before %%^&^&^% start at");
this.list2 = this.af.list('/promotions',
query:
orderByKey: true,
endAt: this.startAtKey1,
limitToLast: 11
);
this.subscription11 = this.list2.subscribe(items =>
let x = 0;
this.lastKey1 = this.startAtKey1;
items.forEach(item =>
let storageRef = firebase.storage().ref().child('/settings/' + item.customMetadata.username + '/profilepicture.png');
storageRef.getDownloadURL().then(url =>
console.log(url + "in download url !!!!!!!!!!!!!!!!!!!!!!!!");
item.customMetadata.picURL = url;
).catch((e) =>
console.log("in caught url !!!!!!!$$$$$$$!!");
item.customMetadata.picURL = 'assets/blankprof.png';
);
if(this.startAtKey1 !== item.$key && this.lastKey1 !== item.$key)
console.log(this.startAtKey1 + " :startAtKey1 before 4444444 item key: " + item.$key);
this.promotions.push(item.customMetadata); //unshift?**************
if(x == 0)
this.startAtKey1 = item.$key;
x++;
);
)
infiniteScroll.complete();
, 500);
更新
我认为需要注意的另一件重要事情是，我使用了 5 个不同的列表，它们看起来像下面的那个......都在同一页面上（我只在下面包含了 2 个 - 这是我上次测试的内容）。 ... 在代码中的位置，还有 4 个类似您在上面看到的列表。它们都包含在<div> 中，就像上面的一样——而且它们都没有同时显示——我想我应该发布整个<ion-content>，以防万一事情相互干扰：
<ion-content no-padding>
<div (swipeLeft)="swipeLeft()" (swipeRight)="toFull()"> <!--(swipeRight)="toProfile()"-->
<!--<ion-refresher (ionRefresh)="doRefresh($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>-->
<div class ='availability contentone' #availability [@moveList]='moveState'>
<ion-list class="marginstatus" no-padding>
<ion-item *ngFor="let z of availabilities" no-padding (tap)="presentProfileModal(z.salon, z.time)">
<div class="feedtoptextcontainer">
<div class="imageparent">
<img class="postprofilepic" src="z.pic">
</div>
<div class="usernamecontainer">
<h4 class="postusername">@z.salon</h4><br>
<h4 class="poststudio">z.time</h4>
</div>
</div>
<!--<img class="imagepost" src="i">-->
</ion-item>
</ion-list>
</div>
<div class ='distance contentone' #distance [@moveList]='moveState'>
<ion-list class="marginstatus" no-padding>
<ion-item *ngFor="let z of distances" no-padding (tap)="presentProfileModalDistance(z.salon)">
<div class="feedtoptextcontainer">
<div class="imageparent">
<img class="postprofilepic" src="z.pic">
</div>
<div class="usernamecontainer">
<h4 class="postusername">@z.salon</h4><br>
<h4 class="poststudio">z.distance mi</h4>
</div>
</div>
<!--<img class="imagepost" src="i">-->
</ion-item>
</ion-list>
</div>
<div class ='ratings contentone' #ratings [@moveList]='moveState'>
<ion-list class="marginstatus" no-padding>
<ion-item *ngFor="let a of rating ; let i = index" no-padding (tap)="presentProfileModalRatings(a.username)">
<div class="feedtoptextcontainer">
<div class="imageparent">
<img class="postprofilepic" src="a.picURL">
</div>
<div class="usernamecontainer">
<h4 class="postusername">@a.username</h4><br>
<h4 class="poststudio">a.stars</h4>
</div>
</div>
<!--<img class="imagepost" src="i">-->
</ion-item>
</ion-list>
</div>
<div class ='price contentone' #price [@moveList]='moveState'>
<ion-list class="marginstatus" no-padding>
<ion-item *ngFor="let a of pricesArray" no-padding (tap)="presentProfileModalPrice(a.username)">
<div class="feedtoptextcontainer">
<div class="imageparent">
<img class="postprofilepic" src="a.picURL">
</div>
<div class="usernamecontainer">
<h4 class="postusername">@a.username</h4><br>
<h4 class="poststudio">a.price</h4>
</div>
</div>
<!--<img class="imagepost" src="i">-->
</ion-item>
</ion-list>
<ion-infinite-scroll (ionInfinite)="doInfiniteP($event)">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</div>
<div class ='weeklydeals contentone' #weeklydeals [@moveList]='moveState'>
<ion-list class="marginstatus" no-padding>
<ion-item *ngFor="let a of promotions" no-padding>
<div class="feedtoptextcontainer">
<!--<div class="imageparent">
<img class="postprofilepic" src="a.url">
</div>-->
<div class="usernamecontainer">
<h4 class="postusername">@a.username</h4><br>
</div>
<h3 class="promotitle">a.title</h3>
<div class="desccontainer">
<h4 class="deal">a.caption</h4>
</div>
</div>
<!--<img class="imagepost" src="i">-->
</ion-item>
</ion-list>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</div>
<ion-item class="noavail" #noavail no-padding no-lines>NO RESULTS</ion-item>
</div>
</ion-content>
我使用renderer 像renderer.setElementStyle(el, 'display', 'none) or block 一样切换列表。
【问题讨论】：
你能在stackblitz.com 中做一个工作示例吗？我在您的 html 中没有看到任何内容 嘿，谢谢...是的，当然...我会告诉你什么时候准备好，以前没有使用过 stackblitz。 我正在尝试让 stackblitz 工作......这是可编辑的版本......stackblitz.com/edit/ionic-trknv8 - 基本上我无法识别angularfire2 auth 和@987654335 @ 包，但已安装 angularfire2 - 特别是对于 ion-infinite-scroll 需要这些...有什么想法吗？ feeduser.ts/feeduser.html 是唯一相关的页面，其余的都是存根，因此它可以工作......还有一点点它在keyboardControl: false 抛出一个错误......我的代码也很混乱抱歉- 我对此非常着急，在开始之前没有太多时间使用 ionic
@SurajRao - 我没有成功设置 stackblitz，如果 angularfire2/auth .... /database 包不起作用，它将无法工作......如果你认为你可以解决这个问题并有时间我可以给你 git repo url...它的公共
您可以在依赖项部分添加它..
【参考方案1】：
原来我在.scroll-content 上的css 是冲突的。似乎如果您将css 添加到.scroll-content，ion-infinite-scroll 将停止工作。
【讨论】：
很高兴听到您发现了问题！ 问题是...我正在使用margin-top: -xx% 来修复上边距就像屏幕一半的错误...我想不出另一种方法来做到这一点。一位朋友建议我在滚动内容上方的 dom 中注入一个元素并使用-margin-top，所以我要尝试一下...如果您有任何想法，请告诉我...这可能会变成另一个堆栈问题:)跨度>
以上是关于离子无限卷轴发射极少的主要内容，如果未能解决你的问题，请参考以下文章