Skip to content

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

discover 左滑右滑

parent 4517159b
Hide whitespace changes
Inline Side-by-side
Showing with 80 additions and 54 deletions
src/pages/tabs/discover/discover.html
View file @ ac0ecacd
...@@ -47,53 +47,58 @@ ...@@ -47,53 +47,58 @@
refreshingSpinner="bubbles"> refreshingSpinner="bubbles">
</ion-refresher-content> </ion-refresher-content>
</ion-refresher> </ion-refresher>
<div class="search-content">
<ng-container *ngFor="let item of newList"> <ion-slides (ionSlideDidChange)="slideChange($event)">
<div class="search-item" (click)="goToDetail(item)"> <ion-slide *ngFor="let new of slideList">
<p class="item-info"> <div class="search-content">
<span class="item-source">{{item.source}}</span> <ng-container *ngFor="let item of new">
<span>{{item.publishTime | date:'yyyy-MM-dd'}}</span> <div class="search-item" (click)="goToDetail(item)">
</p> <p class="item-info">
<div class="item-news"> <span class="item-source">{{item.source}}</span>
<ion-row class="news-item"> <span>{{item.publishTime | date:'yyyy-MM-dd'}}</span>
<ng-container *ngIf="item.imgUrl"> </p>
<ion-col col-8 class="news-left"> <div class="item-news">
<p class="news-title">{{item.title}}</p> <ion-row class="news-item">
<p class="news-end"> <ng-container *ngIf="item.imgUrl">
<ion-icon style="font-size: 2.5rem;vertical-align: sub" name="eye"></ion-icon> <ion-col col-8 class="news-left">
<span>{{item.browseCount}}</span> <p class="news-title">{{item.title}}</p>
<ion-icon name="chatboxes"></ion-icon> <p class="news-end">
<span>{{item.commentCount}}</span> <ion-icon style="font-size: 2.5rem;vertical-align: sub" name="eye"></ion-icon>
<ion-icon name="thumbs-up"></ion-icon> <span>{{item.browseCount}}</span>
<span>{{item.likeCount}}</span> <ion-icon name="chatboxes"></ion-icon>
<ion-icon name="heart"></ion-icon> <span>{{item.commentCount}}</span>
<span>{{item.collectionCount}}</span> <ion-icon name="thumbs-up"></ion-icon>
</p> <span>{{item.likeCount}}</span>
</ion-col> <ion-icon name="heart"></ion-icon>
<ion-col col-4 class="news-right"> <span>{{item.collectionCount}}</span>
<img src="{{picture+item.imgUrl}}"> </p>
</ion-col> </ion-col>
</ng-container> <ion-col col-4 class="news-right">
<ng-container *ngIf="!item.imgUrl"> <img src="{{picture+item.imgUrl}}">
<ion-col col-12 class="news-left"> </ion-col>
<p class="news-title">{{item.title}}</p> </ng-container>
<p class="news-end"> <ng-container *ngIf="!item.imgUrl">
<ion-icon style="font-size: 2.5rem;vertical-align: sub" name="eye"></ion-icon> <ion-col col-12 class="news-left">
<span>{{item.browseCount}}</span> <p class="news-title">{{item.title}}</p>
<ion-icon name="chatboxes"></ion-icon> <p class="news-end">
<span>{{item.commentCount}}</span> <ion-icon style="font-size: 2.5rem;vertical-align: sub" name="eye"></ion-icon>
<ion-icon name="thumbs-up"></ion-icon> <span>{{item.browseCount}}</span>
<span>{{item.likeCount}}</span> <ion-icon name="chatboxes"></ion-icon>
<ion-icon name="heart"></ion-icon> <span>{{item.commentCount}}</span>
<span>{{item.collectionCount}}</span> <ion-icon name="thumbs-up"></ion-icon>
</p> <span>{{item.likeCount}}</span>
</ion-col> <ion-icon name="heart"></ion-icon>
</ng-container> <span>{{item.collectionCount}}</span>
</ion-row> </p>
</div> </ion-col>
</ng-container>
</ion-row>
</div>
</div>
</ng-container>
</div> </div>
</ng-container> </ion-slide>
</div> </ion-slides>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)"> <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content> <ion-infinite-scroll-content></ion-infinite-scroll-content>
......
src/pages/tabs/discover/discover.scss
View file @ ac0ecacd
...@@ -138,4 +138,13 @@ page-discover { ...@@ -138,4 +138,13 @@ page-discover {
background-color: #ffffff; background-color: #ffffff;
} }
} }
.swiper-slide{
align-items: baseline;
font-size: 1.4rem;
}
.slide-zoom{
text-align: left;
}
} }
src/pages/tabs/discover/discover.ts
View file @ ac0ecacd
import {Component, ElementRef, ViewChild} from '@angular/core'; import {Component, ElementRef, ViewChild} from '@angular/core';
import {IonicPage, NavController, NavParams} from 'ionic-angular'; import {IonicPage, NavController, NavParams, Slide, Slides} from 'ionic-angular';
import {SearchNewPage} from "../../home-pages/search-new/search-new"; import {SearchNewPage} from "../../home-pages/search-new/search-new";
import {TabsService} from "../tabs.service"; import {TabsService} from "../tabs.service";
import {StuffDetailPage} from "../../home-pages/stuff-detail/stuff-detail"; import {StuffDetailPage} from "../../home-pages/stuff-detail/stuff-detail";
...@@ -16,6 +16,7 @@ import {CommonService} from "../../../provide/common.service"; ...@@ -16,6 +16,7 @@ import {CommonService} from "../../../provide/common.service";
templateUrl: 'discover.html', templateUrl: 'discover.html',
}) })
export class DiscoverPage { export class DiscoverPage {
@ViewChild(Slides) slides:Slides;
@ViewChild('tips') tips: ElementRef; @ViewChild('tips') tips: ElementRef;
@ViewChild('tabsParent') tabsParent: ElementRef; @ViewChild('tabsParent') tabsParent: ElementRef;
@ViewChild('tabsChildren') tabsChildren: ElementRef; @ViewChild('tabsChildren') tabsChildren: ElementRef;
...@@ -131,7 +132,7 @@ export class DiscoverPage { ...@@ -131,7 +132,7 @@ export class DiscoverPage {
"indexChildren": '34' "indexChildren": '34'
}] }]
}, },
{"name": "知识拓展", "type": -1, "indexParent": 4, "children": []} // {"name": "知识拓展", "type": -1, "indexParent": 4, "children": []}
]; ];
childrenList = []; childrenList = [];
plateType; //分类 plateType; //分类
...@@ -139,9 +140,12 @@ export class DiscoverPage { ...@@ -139,9 +140,12 @@ export class DiscoverPage {
indexParent = 1; indexParent = 1;
indexChildren = 0; indexChildren = 0;
newList; //新闻列表 newList; //新闻列表
noReadNum; noReadNum;
picture: string = AppGlobal.domain + '/wisdomgroup'; picture: string = AppGlobal.domain + '/wisdomgroup';
slideList = [];
constructor(public navCtrl: NavController, public navParams: NavParams, constructor(public navCtrl: NavController, public navParams: NavParams,
public commonSer:CommonService, public commonSer:CommonService,
public tabsSer: TabsService, public emitSer: EmitService) { public tabsSer: TabsService, public emitSer: EmitService) {
...@@ -154,6 +158,7 @@ export class DiscoverPage { ...@@ -154,6 +158,7 @@ export class DiscoverPage {
} }
ionViewDidEnter() { ionViewDidEnter() {
this.slideList.length = 5;
this.changeParent(this.tabsList[1]); this.changeParent(this.tabsList[1]);
} }
...@@ -185,7 +190,9 @@ export class DiscoverPage { ...@@ -185,7 +190,9 @@ export class DiscoverPage {
if (e.attachments.length > 0) { if (e.attachments.length > 0) {
e.imgUrl = e.attachments[0].path; e.imgUrl = e.attachments[0].path;
} }
}) });
this.slides.slideTo(index,500);
this.slideList[index] = this.newList;
} }
) )
} }
...@@ -263,4 +270,9 @@ export class DiscoverPage { ...@@ -263,4 +270,9 @@ export class DiscoverPage {
e.complete(); e.complete();
} }
slideChange(e){
const index = this.slides.getActiveIndex();
console.log(this.tabsList[index]);
this.changeParent(this.tabsList[index])
}
} }
src/pages/tabs/home/home.html
View file @ ac0ecacd
...@@ -39,11 +39,11 @@ ...@@ -39,11 +39,11 @@
</ion-col> </ion-col>
</ion-row> </ion-row>
</div> </div>
<div style="height: 200px"> <div style="height: 250px">
<ion-slides (ionSlideDidChange)="slideChange($event)" #slides *ngIf="slidersItems.length>0" pager <ion-slides (ionSlideDidChange)="slideChange($event)" #slides *ngIf="slidersItems.length>0" pager
loop="true" loop="true"
autoplay="2000" speed="1500"> autoplay="2000" speed="1500">
<ion-slide style="height:200px;width: 100%;" *ngFor="let item of slidersItems;"> <ion-slide style="height:250px;width: 100%;" *ngFor="let item of slidersItems;">
<img src="{{picture+item.imgUrl}}" class="slide-image" (click)="goToDetail(item)"> <img src="{{picture+item.imgUrl}}" class="slide-image" (click)="goToDetail(item)">
</ion-slide> </ion-slide>
</ion-slides> </ion-slides>
......
src/pages/tabs/home/home.scss
View file @ ac0ecacd
page-home { page-home {
ion-slides { ion-slides {
width: 100%; width: 100%;
height: 200px; height: 250px;
} }
.slide-image { .slide-image {
width: 100%; width: 100%;
height: 200px; height: 250px;
} }
.swiper-container { .swiper-container {
height: 200px; height: 250px;
width: 100%; width: 100%;
overflow-y: auto; overflow-y: auto;
} }
......
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