Skip to content

P
party-build-cloud
Commit 5b9385f4 authored by wangqinghua's avatar wangqinghua
Browse files
Options

首页上拉加载更多的数据调整

parent 888497b4
Show whitespace changes
Inline Side-by-side
Showing with 78 additions and 55 deletions
src/app/app.scss
View file @ 5b9385f4
......@@ -391,3 +391,8 @@ a[disabled], button[disabled], [ion-button][disabled],
font-size: 2.5rem;
}
}
.noData{
text-align: center;
color: #999;
padding-bottom: 5px;
}
\ No newline at end of file
src/components/slide/slide.scss
View file @ 5b9385f4
......@@ -23,7 +23,7 @@ slide {
}
.slide-zoom{
text-align: center;
line-height: $slide-height;
line-height: 219px;
max-height: 100%;
}
.swiper-container {
......
src/pages/login/login.scss
View file @ 5b9385f4
......@@ -7,6 +7,9 @@ page-login {
justify-content: left;
box-sizing: border-box;
}
ion-title{
background-color: #e42417;
}
......
src/pages/tabs/discover/discover.html
View file @ 5b9385f4
......@@ -55,7 +55,7 @@
</ion-refresher-content>
</ion-refresher>
<ion-slides (ionSlideDidChange)="slideChange($event)" loop="true">
<ion-slides (ionSlideDidChange)="slideChange()" loop="true">
<ion-slide *ngFor="let new of slideList">
<div class="search-content">
<ng-container *ngFor="let item of new">
......@@ -107,10 +107,10 @@
</ion-slide>
</ion-slides>
<!-- <ion-infinite-scroll #infiniteScrollContent (ionInfinite)="doInfinite($event)">-->
<!-- <ion-infinite-scroll-content-->
<!-- loadingSpinner="bubbles" threshold="10%"-->
<!-- loadingText="加载更多..."></ion-infinite-scroll-content>-->
<!-- </ion-infinite-scroll>-->
<ion-infinite-scroll #infiniteScrollContentEle (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="加载更多..."></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
src/pages/tabs/discover/discover.ts
View file @ 5b9385f4
import {Component, ElementRef, Renderer2, ViewChild} from '@angular/core';
import {IonicPage, NavController, NavParams, Slide, Slides} from 'ionic-angular';
import {InfiniteScrollContent, IonicPage, NavController, NavParams, Slide, Slides} from 'ionic-angular';
import {SearchNewPage} from "../../home-pages/search-new/search-new";
import {TabsService} from "../tabs.service";
import {StuffDetailPage} from "../../home-pages/stuff-detail/stuff-detail";
......@@ -22,7 +22,8 @@ export class DiscoverPage {
@ViewChild('tabsChildren') tabsChildren: ElementRef;
@ViewChild('tabSpan') tabSpan: ElementRef;
@ViewChild('newsContent') newsContent: ElementRef;
@ViewChild('infiniteScrollContent') infiniteScrollContent: ElementRef;
@ViewChild(InfiniteScrollContent) infiniteScrollContent: InfiniteScrollContent;
@ViewChild('infiniteScrollContentEle') infiniteScrollContentEle: ElementRef;
//所属板块类型:
//1党章党规,2系列讲话,3中央精神,4本市部署,5通知公告,6党建动态,7工作提示,8党务参考
......@@ -148,6 +149,9 @@ export class DiscoverPage {
slideList = [];
toIndex;
//分页
pageCount = AppGlobal.pageCount;
constructor(public navCtrl: NavController, public navParams: NavParams,
public commonSer: CommonService,public renderer:Renderer2,
public tabsSer: TabsService, public emitSer: EmitService) {
......@@ -248,10 +252,11 @@ export class DiscoverPage {
this.navCtrl.push(NoticePage);
}
//下拉刷新
doRefresh(e) {
const data = {
pageSize: 1,
pageCount: 100,
pageNum: 1,
pageCount: this.pageCount,
obj: {
'plateType': this.plateType,
'resourceType': 1
......@@ -274,15 +279,16 @@ export class DiscoverPage {
)
}
//上拉加载
doInfinite(e) {
this.renderer.setStyle(this.infiniteScrollContent.nativeElement,'height','84px');
this.renderer.setStyle(this.infiniteScrollContentEle.nativeElement,'height','84px');
setTimeout(()=>{
e.complete();
this.renderer.setStyle(this.infiniteScrollContent.nativeElement,'height','0px');
this.renderer.setStyle(this.infiniteScrollContentEle.nativeElement,'height','0px');
},1000)
}
slideChange(e) {
slideChange() {
let index = this.slides.getActiveIndex();
if (index == this.tabsList.length) index = 0;
if (index == this.tabsList.length + 1) index = 1;
......
src/pages/tabs/home/home.html
View file @ 5b9385f4
......@@ -22,7 +22,7 @@
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content>
<ion-content overflow-scroll="false">
<ion-refresher (ionRefresh)="doRefresh($event)">
<ion-refresher-content pullingText="下拉刷新"
refreshingSpinner="bubbles">
......@@ -66,7 +66,7 @@
</div>
</div>
<ion-slides (ionSlideDidChange)="slideChange()" loop="true">
<ion-slide *ngFor="let item of slideList;let i = index">
<ion-slide [style.top]="isScroll == true?'50px':''" *ngFor="let item of slideList;let i = index">
<div class="main-news">
<ng-container *ngFor="let new of item;">
<ng-container *ngIf="new.imgUrl">
......@@ -105,11 +105,12 @@
</ion-slide>
</ion-slides>
<!-- <ion-infinite-scroll #infiniteScrollContent (ionInfinite)="doInfinite($event)">-->
<!-- <ion-infinite-scroll-content-->
<!-- loadingSpinner="bubbles"-->
<!-- loadingText="加载更多..."></ion-infinite-scroll-content>-->
<!-- </ion-infinite-scroll>-->
<ion-infinite-scroll #infiniteScrollContentEle (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="加载更多..."></ion-infinite-scroll-content>
</ion-infinite-scroll>
<p class="noData" *ngIf="!loadMore">已经到底了</p>
</ion-content>
<!--政治生日-->
<div *ngIf="isBir" class="signMask" (click)="close($event)">
......
src/pages/tabs/home/home.scss
View file @ 5b9385f4
......@@ -195,7 +195,7 @@ page-home {
align-items: baseline;
font-size: 1.4rem;
overflow-y: scroll;
padding-bottom: 1rem;
padding-bottom: 5rem;
text-align: left;
}
.slide-zoom{
......
src/pages/tabs/home/home.ts
View file @ 5b9385f4
......@@ -32,7 +32,8 @@ export class HomePage {
@ViewChild('topHeight') topHeight: ElementRef;
@ViewChild('headerTag') headerTag: ElementRef;
@ViewChild('homeMiddleTips') homeMiddleTips: ElementRef;
@ViewChild('infiniteScrollContent') infiniteScrollContent: ElementRef;
@ViewChild('infiniteScrollContentEle') infiniteScrollContentEle: ElementRef;
@ViewChild(InfiniteScrollContent) infiniteScrollContent: InfiniteScrollContent;
picture: string = AppGlobal.domain + '/wisdomgroup';
//所属板块类型:
......@@ -46,7 +47,7 @@ export class HomePage {
// ];
tabsList = [
{name: "系列讲话", type: 2, index: 0},
{name: "党章党规", type: 1,index: 1},
{name: "党章党规", type: 1, index: 1},
{name: "中央精神", type: 3, index: 2},
{name: "本市部署", type: 4, index: 3}
];
......@@ -73,15 +74,16 @@ export class HomePage {
spanWidth; //文字宽度
pageSize = 1;
pageCount = 100;
pageNum = 1;
pageCount = AppGlobal.pageCount;
//分页
totalNum;
loadMore = true;
constructor(public navCtrl: NavController, public tts: TextToSpeech, public datePipe: DatePipe,
public commonSer: CommonService, public emitSer: EmitService,
public zone: NgZone, public slideListCom: SlideListComponent,
public renderer:Renderer2,public slideCom:SlideComponent,
public renderer: Renderer2, public slideCom: SlideComponent,
public appService: AppService, public http: Http, public storage: Storage,
public badge: Badge, public tabsSer: TabsService) {
// 接收发射过来的数据
......@@ -100,6 +102,7 @@ export class HomePage {
this.signObj = res.data;
}
);
this.change(this.tabsList[0]);
}
ionViewDidLoad() {
......@@ -107,7 +110,6 @@ export class HomePage {
this.spanWidth = this.tabSpan.nativeElement.offsetWidth; //文字宽度
this.tips.nativeElement.style.width = this.tabSpan.nativeElement.offsetWidth + 'px';
this.tips1.nativeElement.style.width = this.tabSpan.nativeElement.offsetWidth + 'px';
this.change(this.tabsList[0]);
this.getInfo();
this.scrollHeight();
}
......@@ -127,15 +129,16 @@ export class HomePage {
}
change(item) {
this.pageSize = 1;
const index = item.index;
this.pageNum = 1;
this.loadMore = true;
this.infiniteScrollContent.inf.enable(true);
this.index = item.index;
// 自身div的一半 - 滑块的一半
this.tips.nativeElement.style.left = this.itemWidth * (index) + (this.itemWidth - this.spanWidth) / 2 + 'px';
this.tips1.nativeElement.style.left = this.itemWidth * (index) + (this.itemWidth - this.spanWidth) / 2 + 'px';
this.index = index;
this.tips.nativeElement.style.left = this.itemWidth * (this.index) + (this.itemWidth - this.spanWidth) / 2 + 'px';
this.tips1.nativeElement.style.left = this.itemWidth * (this.index) + (this.itemWidth - this.spanWidth) / 2 + 'px';
this.plateType = item.type;
const data = {
pageSize: this.pageSize,
pageNum: this.pageNum,
pageCount: this.pageCount,
obj: {
'plateType': this.plateType,
......@@ -146,21 +149,21 @@ export class HomePage {
(res) => {
let arr = res.data.list;
this.totalNum = res.data.total;
if(arr.length > 0){
if (arr.length > 0) {
arr.forEach(e => {
if (e.attachments.length > 0) {
e.imgUrl = e.attachments[0].path;
}
});
this.slideList[index] = arr;
this.slideList[this.index] = arr;
}
if(this.slides1) this.slides1.slideTo(index, 500);
if (this.slides1) this.slides1.slideTo(this.index, 500);
}
)
}
slideChange() {
if(this.initSlide == 0){ //防止初始化加载
if (this.initSlide == 0) { //防止初始化加载
this.initSlide = 1;
return false;
}
......@@ -264,24 +267,28 @@ export class HomePage {
//上拉加载
doInfinite(e) {
if(this.totalNum == this.slideList[this.index].length){
e.complete();
this.commonSer.toastTime('没有更多数据了',1000);
return false
console.log(this.totalNum)
console.log(this.slideList[this.index].length + 1)
if (this.totalNum < this.slideList[this.index].length + 1) {
console.log('没有数据了');
this.loadMore = false;
e.enable(false);
return false;
}
this.pageSize ++;
this.pageNum++;
const data = {
pageSize: this.pageSize,
pageNum: this.pageNum,
pageCount: this.pageCount,
obj: {
'plateType': this.plateType,
'resourceType': 1
}
}
};
this.renderer.setStyle(this.infiniteScrollContentEle.nativeElement, 'height', '60px');
this.tabsSer.stuffPage(data).subscribe(
(res) => {
let arr = res.data.list;
if(arr.length > 0){
if (arr.length > 0) {
arr.forEach(e => {
if (e.attachments.length > 0) {
e.imgUrl = e.attachments[0].path;
......@@ -289,12 +296,10 @@ export class HomePage {
this.slideList[this.index].push(e);
});
}
this.renderer.setStyle(this.infiniteScrollContent.nativeElement,'height','84px');
setTimeout(()=>{
setTimeout(() => {
e.complete();
this.renderer.setStyle(this.infiniteScrollContent.nativeElement,'height','0px');
},800)
this.renderer.setStyle(this.infiniteScrollContentEle.nativeElement, 'height', '0px');
}, 1000)
}
)
......@@ -303,7 +308,7 @@ export class HomePage {
//下拉刷新
doRefresh(e) {
const data = {
pageSize: 1,
pageNum: 1,
pageCount: this.pageCount,
obj: {
'plateType': this.plateType,
......@@ -313,7 +318,7 @@ export class HomePage {
this.tabsSer.stuffPage(data).subscribe(
(res) => {
let arr = res.data.list;
if(arr.length > 0){
if (arr.length > 0) {
arr.forEach(e => {
if (e.attachments.length > 0) {
e.imgUrl = e.attachments[0].path;
......@@ -321,10 +326,10 @@ export class HomePage {
});
}
this.slideList[this.index] = arr;
setTimeout(()=>{
setTimeout(() => {
this.commonSer.toastTime('刷新成功!', 800);
e.complete();
},800)
}, 800)
}
)
}
......
src/service/http.service.ts
View file @ 5b9385f4
......@@ -32,6 +32,8 @@ export class AppGlobal {
getLogin: '/app/loginpost',
getDetails: '/api/ionic3/details'
};
static pageCount = 2;
}
@Injectable()
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment