利用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"
<div style="display:flex;width:625px;height: 650px;white-space: nowrap;" > <ion-scroll #scroll2
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
利用ionic3進行上一行和左一行不動，中間移動的功能