利用ionic3进行上一行和左一行不动，中间移动的功能

首先在html中的写法是

<ion-header>

<ion-navbar>

<ion-title>历史数据</ion-title>

</ion-navbar>

</ion-header>

<ion-content >

<div style="display:flex;width:625px;">

 

<div class="head">地区</div>

<div style="overflow: hidden;white-space: nowrap;width:250px;height: 50px;" >

<ion-scroll #scroll1 scrollX="true" overflow-scroll="true" has-bouncing="false" (onScroll)="addScrollEventListener()" style="margin-top:0;height:50px">

<div style="display:flex;width:500px;height:50px" id="right">

<div class="head" >到件量</div>

<div class="head">出仓量</div>

<div class="head">滞留量</div>

<div class="head" style="border-right:0;">未派送量</div>

</div>

</ion-scroll>

</div>

 

</div>

<div style="display:flex;width:625px;height: 650px;white-space: nowrap;" >

<ion-scroll #scroll2   scrollY="true" overflow-scroll="true" has-bouncing="false" style="height:550px;width: 125px">

<div *ngFor="let d of data" class="head" >

{{d.zoneName}}

</div>

</ion-scroll>

<div style="overflow: hidden;white-space: nowrap;width:250px">

<ion-scroll direction="xy" #scroll3 scrollX="true" scrollY="true" overflow-scroll="false" has-bouncing="false" delegate-handle="rightContainerHandle" style="height:550px;">

<div style="width:500px;" >

<div *ngFor="let d of data" style="display:flex;" >

<div class="head" >

{{d.arriveTickets}}

</div>

<div class="head">

{{d.moniOutCnt}}

</div>

<div class="head">

{{d.moniStayCnt}}

</div>

<div class="head" style="border-right:0;">

{{d.moniUndeliveryCnt}}

</div>

</div>

</div>

</ion-scroll>

</div>

</div>

</ion-content>

标红颜色的首先是在ts中滚动时需要用到的变量，是个标识符。这个问题我纠结了两天才搞出来。一定记得滚动的监听事件不是on-scroll了

 

 

ts中的代码

import { Component, SystemJsNgModuleLoader,HostListener,NgZone ,ViewChild } from '@angular/core';

import { NavController, NavParams,IonicPageModule} from 'ionic-angular';

import{RestProvider} from '../../providers/rest/rest';

import {Http,Response, Jsonp} from '@angular/http';

import { IonicModule } from 'ionic-angular';

import { NgModule, ErrorHandler ,CUSTOM_ELEMENTS_SCHEMA, SchemaMetadata} from '@angular/core';

import { Directive, ElementRef, Output,Input, EventEmitter } from '@angular/core';

import { ScrollEventModule,ScrollEvent } from 'ngx-scroll-event';

import {Content,Scroll,Spinner} from 'ionic-angular'

import { asElementData } from '@angular/core/src/view';

/**

* Generated class for the AlarmPage page.

*

* See https://ionicframework.com/docs/components/#navigation for more info on

* Ionic pages and navigation.

*/

@Component({

selector: 'page-rank',

templateUrl: 'rank.html',

})

@NgModule({

imports: [IonicModule,IonicPageModule,ScrollEventModule]

})

export class RankPage {

@Output() scrollChange = new EventEmitter<number>();

@ViewChild(Spinner) spinnerElement: Spinner;

@ViewChild(Content) content: Content;

@ViewChild('scroll3') scroll3: Scroll;

@ViewChild('scroll1') scroll1: Scroll;

@ViewChild('scroll2') scroll2: Scroll;

 

//括号中的值在html页面中标注的时候，名称不能其他属性相同。如该文件已经有一个pnavs的变量，则会报错。

 

addScrollEventListener() {

this.scroll2._scrollContent.nativeElement.onscroll = event => {

this.scroll3._scrollContent.nativeElement.scrollTop =this.scroll2._scrollContent.nativeElement.scrollTop;

// this.scroll1._scrollContent.nativeElement.scrollLeft =this.scroll2._scrollContent.nativeElement.scrollLeft;

}

this.scroll1._scrollContent.nativeElement.onscroll = event => {

//this.scroll3._scrollContent.nativeElement.scrollTop =this.scroll2._scrollContent.nativeElement.scrollTop;

this.scroll3._scrollContent.nativeElement.scrollLeft =this.scroll1._scrollContent.nativeElement.scrollLeft;

}

this.scroll3._scrollContent.nativeElement.onscroll = event => {

this.scroll2._scrollContent.nativeElement.scrollTop =this.scroll3._scrollContent.nativeElement.scrollTop;

this.scroll1._scrollContent.nativeElement.scrollLeft =this.scroll3._scrollContent.nativeElement.scrollLeft;

}

}

ionViewDidLoad() {

this.addScrollEventListener();

}

data=[

{'zoneName':'广州区','arriveTickets':'6987','moniOutCnt':'2221','moniStayCnt':'45','moniUndeliveryCnt':'44'},

{'zoneName':'深圳区','arriveTickets':'2356','moniOutCnt':'331','moniStayCnt':'45','moniUndeliveryCnt':'44'},

{'zoneName':'武汉区','arriveTickets':'6744','moniOutCnt':'2621','moniStayCnt':'45','moniUndeliveryCnt':'44'},

{'zoneName':'苏州区','arriveTickets':'6542','moniOutCnt':'2881','moniStayCnt':'45','moniUndeliveryCnt':'44'},

{'zoneName':'杭州区','arriveTickets':'2367','moniOutCnt':'5621','moniStayCnt':'45','moniUndeliveryCnt':'44'},

{'zoneName':'东莞区','arriveTickets':'1129','moniOutCnt':'1221','moniStayCnt':'45','moniUndeliveryCnt':'44'},

{'zoneName':'惠州区','arriveTickets':'7893','moniOutCnt':'4521','moniStayCnt':'45','moniUndeliveryCnt':'44'},

{'zoneName':'汕头区','arriveTickets':'2356','moniOutCnt':'7821','moniStayCnt':'45','moniUndeliveryCnt':'44'},

{'zoneName':'清远区','arriveTickets':'67554','moniOutCnt':'9921','moniStayCnt':'45','moniUndeliveryCnt':'44'},

{'zoneName':'长沙区','arriveTickets':'5534','moniOutCnt':'2221','moniStayCnt':'45','moniUndeliveryCnt':'44'},

{'zoneName':'岳阳区','arriveTickets':'6643','moniOutCnt':'2221','moniStayCnt':'45','moniUndeliveryCnt':'44'},

{'zoneName':'株洲区','arriveTickets':'6546','moniOutCnt':'2221','moniStayCnt':'45','moniUndeliveryCnt':'44'},

{'zoneName':'南充区','arriveTickets':'4353','moniOutCnt':'2221','moniStayCnt':'45','moniUndeliveryCnt':'44'},

{'zoneName':'鞍山区','arriveTickets':'4526','moniOutCnt':'2221','moniStayCnt':'45','moniUndeliveryCnt':'44'}

];

city=["杭州","郑州","上海","广州","杭州","杭州","杭州","杭州","杭州","杭州","杭州","杭州","杭州","杭州","杭州","杭州","杭州","杭州","杭州","杭州","杭州","杭州","杭州","杭州",];

stylefor=["含氮量","含磷量","含钾量","含氮量","含磷量","含钾量","含氮量","含磷量","含钾量","含氮量","含磷量","含钾量","含氮量","含磷量","含钾量","含氮量","含磷量","含钾量",];

d=[1,2,3,4,5,6,7,8,9];

list=[];

public items:any=[];

constructor(public navCtrl: NavController,public rest:RestProvider,public jsonp:Jsonp,public http:Http,public zone: NgZone,private el: ElementRef) {//首次打开要显示的数据

 

this.geturl();

}

geturl(){

//console.log(this.getData("http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=2&callback=JSONP_CALLBACK"));

//var list=this.getData("http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=2&callback=JSONP_CALLBACK");

this.jsonp.get("http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=2&callback=JSONP_CALLBACK").subscribe(function(data){

console.log(data["_body"]);

});

this.http.get("http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=2").subscribe(function(data){

console.log(JSON.parse(data["_body"]));

});

}

public getData(url:string):any{

var rs=this.list;

this.jsonp.get(url).subscribe(function(data){

console.log(data["_body"]["result"]);

var resData:any[]=data["_body"]["result"];

for(var i=0;i<resData.length;i++){

rs.push(resData[i])

}

},function(err){

console.log(err)

})

 

return this.list;

 

}

 

}

 

 

ts中标红的代码是前面html标红的相呼应，然后addScrollEventListener进行滚动的监听 注意：  ionViewDidLoad()这个是ionic3本身的方法，只要触动页面，就能调用这个方法，无论点击还是拉动。

 

然后就是

this.scroll2._scrollContent.nativeElement.onscroll = event => {

this.scroll3._scrollContent.nativeElement.scrollTop =this.scroll2._scrollContent.nativeElement.scrollTop;

// this.scroll1._scrollContent.nativeElement.scrollLeft =this.scroll2._scrollContent.nativeElement.scrollLeft;

}就是监听事件，只要滑动就能触发的事件

 

 

 

 

 

 

 

 

css代码

*{

margin:0px;

padding:0px;

}

.focus{

height: 150px;

width: 100%;

ion-slide{

height: 150px;

width: 100%;

img{

height: 150px;

width: 100%;

}

}

}

.slide_product{

//滚动

ion-scroll{

width:100%;

height:800px;

}

ul{

list-style: none;

padding: 0px 5px;

li{

width: 80px;

height: 120px;

float: left;

margin-right: 10px;

p{

padding:4px;

margin:0px;

}

}

}

}

.home_title{

height: 50px;

width: 100%;

background-image: url("../../assets/imgs/pict1.jpg");

}

.home_title{

height: 50px;

}

.cate_content{

width:100%;

height: 100%; /*首先看高度100% 是否管用 如果没有作用我们要给元素设置绝对定位*/

display: flex;

.cate_left{

width: 100px;

height: 100%;

overflow-y: auto;

}

.cate_right{

height: 100%;

flex:1;

margin-left:5px;

overflow-y: auto;

}

}

table.gridtable {

font-family: verdana,arial,sans-serif;

font-size:11px;

color:#333333;

border-width: 1px;

border-color: #666666;

border-collapse: collapse;

}

table.gridtable th {

border-width: 1px;

padding: 8px;

width:2%;

border-style: solid;

border-color: #666666;

background-color: #dedede;

}

table.gridtable td {

border-width: 1px;

padding: 8px;

width:2%;

border-style: solid;

border-color: #666666;

background-color: #ffffff;

color: #f53d3d;

}

.head{

border-bottom:solid 1px #D1D3D6;

border-right:solid 1px #D1D3D6;

height:50px;

display:flex;

align-items:center;

width:125px;

font-size:14px;

color:#262626;

justify-content:center;

}

代码效果图如下

2018-08-17