Skip to content

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

左滑

parent 65b65be3
Hide whitespace changes
Inline Side-by-side
Showing with 105 additions and 92 deletions
src/components/components.module.ts
View file @ f1ea0484
import { NgModule } from '@angular/core';
import { SlideComponent } from './slide/slide';
import {NgModule} from '@angular/core';
import {SlideComponent} from './slide/slide';
import {IonicPageModule} from "ionic-angular";
import { SlideListComponent } from './slide-list/slide-list';
import {SlideListComponent} from './slide-list/slide-list';
@NgModule({
declarations: [SlideComponent,
SlideListComponent,
declarations: [SlideComponent,
SlideListComponent,
],
imports: [
IonicPageModule
],
exports: [SlideComponent,
SlideListComponent,
imports: [
IonicPageModule
],
exports: [SlideComponent,
SlideListComponent,
],
providers:[
SlideComponent,
]
providers: [
SlideComponent,
SlideListComponent,
]
})
export class ComponentsModule {}
export class ComponentsModule {
}
src/components/slide-list/slide-list.html
View file @ f1ea0484
<!--true 隐藏 false 显示-->
<div [hidden]="isScroll" class="news-content">
<div class="tabs-parent">
<div *ngFor="let item of tabsList;let i = index" (click)="change(item)" class="tabs-children">
......@@ -7,6 +8,7 @@
</div>
</div>
<!--固定 false -->
<div [hidden]="!isScroll" ion-fixed class="news-content ion-fixed">
<div class="tabs-parent">
<div *ngFor="let item of tabsList;let i = index" (click)="change(item)" class="tabs-children">
......
src/components/slide-list/slide-list.ts
View file @ f1ea0484
import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
import {Slides} from "ionic-angular";
import {AfterViewInit, Component, ElementRef, NgZone, ViewChild} from '@angular/core';
import {Content, Slides} from "ionic-angular";
import {TabsService} from "../../pages/tabs/tabs.service";
import {AppGlobal} from "../../service/http.service";
@Component({
selector: 'slide-list',
templateUrl: 'slide-list.html'
selector: 'slide-list',
templateUrl: 'slide-list.html'
})
export class SlideListComponent implements AfterViewInit{
@ViewChild(Slides) slides:Slides;
@ViewChild('tabSpan') tabSpan:ElementRef;
@ViewChild('tips') tips:ElementRef;
@ViewChild('tips1') tips1:ElementRef;
export class SlideListComponent implements AfterViewInit {
@ViewChild(Slides) slides1: Slides;
@ViewChild('tabSpan') tabSpan: ElementRef;
@ViewChild('tips') tips: ElementRef;
@ViewChild('tips1') tips1: ElementRef;
isScroll = false;
//所属板块类型:
//1党章党规,2系列讲话,3中央精神,4本市部署,5通知公告,6党建动态,7工作提示,8党务参考
//9廉政格言,10纪检提示,11风险排查,12警示教育,13支部活动,14党建联建,15结对帮扶
tabsList = [
{name: "系列讲话", type: 2, index: 0},
{name: "党章党规", type: 1, index: 1},
{name: "中央精神", type: 3, index: 2},
{name: "本市部署", type: 4, index: 3}
];
index = 0;
slideList = [];
picture: string = AppGlobal.domain + '/wisdomgroup';
isScroll = false;
//所属板块类型:
//1党章党规,2系列讲话,3中央精神,4本市部署,5通知公告,6党建动态,7工作提示,8党务参考
//9廉政格言,10纪检提示,11风险排查,12警示教育,13支部活动,14党建联建,15结对帮扶
tabsList = [
{name: "系列讲话", type: 2, index: 0},
{name: "党章党规", type: 1, index: 1},
{name: "中央精神", type: 3, index: 2},
{name: "本市部署", type: 4, index: 3}
];
index = 0;
slideList = [];
picture: string = AppGlobal.domain + '/wisdomgroup';
constructor(private tabsSer: TabsService,public zone:NgZone) {
this.slideList.length = 4;
}
constructor(private tabsSer:TabsService) {
this.slideList.length = 4;
console.log('Hello SlideListComponent Component');
}
ngAfterViewInit(): void {
this.change(this.tabsList[0]);
}
change(item) {
const index = item.index;
let itemWidth = window.screen.width / 4;
let 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';
// 自身div的一半 - 滑块的一半
this.tips.nativeElement.style.left = itemWidth * (index) + (itemWidth - spanWidth) / 2 + 'px';
this.tips1.nativeElement.style.left = itemWidth * (index) + (itemWidth - spanWidth) / 2 + 'px';
this.index = index;
const data = {
pageSize: 1,
pageCount: 100,
obj: {
'plateType': item.type,
'resourceType': 1
}
ngAfterViewInit(): void {
this.change(this.tabsList[0]);
}
this.tabsSer.stuffPage(data).subscribe(
(res) => {
let arr = res.data;
arr.forEach(e => {
if (e.attachments.length > 0) {
e.imgUrl = e.attachments[0].path;
change(item) {
const index = item.index;
let itemWidth = window.screen.width / 4;
let 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';
// 自身div的一半 - 滑块的一半
this.tips.nativeElement.style.left = itemWidth * (index) + (itemWidth - spanWidth) / 2 + 'px';
this.tips1.nativeElement.style.left = itemWidth * (index) + (itemWidth - spanWidth) / 2 + 'px';
this.index = index;
const data = {
pageSize: 1,
pageCount: 100,
obj: {
'plateType': item.type,
'resourceType': 1
}
})
this.slides.slideTo(index,500);
this.slideList[index] = arr;
}
)
}
this.tabsSer.stuffPage(data).subscribe(
(res) => {
let arr = res.data;
arr.forEach(e => {
if (e.attachments.length > 0) {
e.imgUrl = e.attachments[0].path;
}
})
this.slides1.slideTo(index, 500);
this.slideList[index] = arr;
}
)
}
slideChange(e){
const index = this.slides.getActiveIndex();
// console.log(this.tabsList[index]);
// this.changeParent(this.tabsList[index])
}
slideChange(e) {
const index = this.slides1.getActiveIndex();
this.change(this.tabsList[index])
}
//
goToDetail(item){}
//判断是否scroll true 滑动 false 不滑动
scroll(bool) {
this.isScroll = bool !== 'false';
console.log(this.isScroll)
}
//
goToDetail(item) {
}
}
src/components/slide/slide.html
View file @ f1ea0484
<div class="slides-content">
<ion-slides (ionSlideDidChange)="slideChange($event)" #slides *ngIf="slidersItems.length>0" pager
loop="true"
autoplay="2000" speed="1500">
<ion-slide *ngFor="let item of slidersItems;">
<img src="{{picture+item.imgUrl}}" class="slide-image" (click)="goToDetail(item)">
</ion-slide>
</ion-slides>
<ion-slides (ionSlideDidChange)="slideChange($event)" #slides *ngIf="slidersItems.length>0" pager
loop="true"
autoplay="2000" speed="1500">
<ion-slide *ngFor="let item of slidersItems;">
<img src="{{picture+item.imgUrl}}" class="slide-image" (click)="goToDetail(item)">
</ion-slide>
</ion-slides>
</div>
<p class="slides-title">{{slideTitle}} <span class="main-color" float-end>1<span
<p class="slides-title">
{{slideTitle}} <span class="main-color" float-end>1<span
style="font-size: 1.5rem;font-weight: 400;">/{{slidersItems.length}}</span></span></p>
\ No newline at end of file
src/pages/tabs/home/home.ts
View file @ f1ea0484
......@@ -12,6 +12,7 @@ import {SearchNewPage} from "../../home-pages/search-new/search-new";
import {StuffDetailPage} from "../../home-pages/stuff-detail/stuff-detail";
import {EmitService} from "../../../provide/emit.service";
import {DatePipe} from "@angular/common";
import {SlideListComponent} from "../../../components/slide-list/slide-list";
@IonicPage()
@Component({
......@@ -61,7 +62,7 @@ export class HomePage {
constructor(public navCtrl: NavController, public tts: TextToSpeech, public datePipe: DatePipe,
public commonSer: CommonService, public emitSer: EmitService,
public zone: NgZone,public renderer:Renderer2,
public zone: NgZone,public slideList:SlideListComponent,
public appService: AppService, public http: Http, public storage: Storage,
public badge: Badge, public tabsSer: TabsService) {
// 接收发射过来的数据
......@@ -85,15 +86,17 @@ export class HomePage {
this.getInfo();
this.scrollHeight();
}
scrollHeight(){
const height = this.topHeight.nativeElement.offsetHeight + 80;
this.content.ionScroll.subscribe(($event)=>{
this.zone.run(()=>{
// this.headerTag.nativeElement.
if(this.content.scrollTop > height){
this.isScroll = true;
this.slideList.scroll('true');
}else{
this.isScroll = false;
this.slideList.scroll('false');
}
this.content.resize();
})
......
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