首先在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
?
?
)
)
