slide-list.ts

import {AfterViewInit, Component, ElementRef, NgZone, ViewChild} from '@angular/core';
import {App, Content, NavController, Slides} from "ionic-angular";
import {TabsService} from "../../pages/tabs/tabs.service";
import {AppGlobal} from "../../service/http.service";
import {CommonService} from "../../provide/common.service";
import {StuffDetailPage} from "../../pages/home-pages/stuff-detail/stuff-detail";

@Component({
    selector: 'slide-list',
    templateUrl: 'slide-list.html'
})
export class SlideListComponent implements AfterViewInit {
    @ViewChild(Slides) slides1: Slides;
    @ViewChild('tabSpan') tabSpan: ElementRef;
    @ViewChild('tips') tips: ElementRef;
    @ViewChild('tips1') tips1: ElementRef;

    isScroll = false;
    private nav:NavController;
    //所属板块类型:
    //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}
    ];
    plateType;
    index = 0;
    slideList = [];
    picture: string = AppGlobal.domain + '/wisdomgroup';


    constructor(private tabsSer: TabsService,public zone:NgZone,
                private commonSer:CommonService,private app:App) {
        this.slideList.length = 4;
        this.nav = this.app.getRootNav();
    }

    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;
        this.plateType = item.type;
        console.log(this.plateType)
        const data = {
            pageSize: 1,
            pageCount: 100,
            obj: {
                'plateType': this.plateType,
                'resourceType': 1
            }
        }
        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) {
        let index = this.slides1.getActiveIndex();
        if (index == this.tabsList.length) index = 0;
        if (index == this.tabsList.length +1) index = 1;
        this.change(this.tabsList[index])
    }

    //判断是否scroll  true 滑动  false  不滑动
    scroll(bool) {
        this.isScroll = bool !== 'false';
        console.log(this.isScroll)
    }

    //查看详情
    goToDetail(item) {
        this.nav.push(StuffDetailPage, {
            id: item.id
        })
    }

    //下拉刷新
    refresh(e){
        console.log(this.plateType)
        const data = {
            pageSize: 1,
            pageCount: 100,
            obj: {
                'plateType': this.plateType,
                'resourceType': 1
            }
        }
        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.commonSer.toastTime('刷新成功!',800)
                this.slideList[this.index] = arr;
                e.complete();
            }
        )
    }

}