The first thing to do in HTML is<ion-header>
<ion-navbar> <ion-title> historical Data </ion-title> </ion-navbar></ion-header>
<ion-content >
<div style= "display:flex;width:625px;" > <div class= "Head" > Region </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 "> To Pieces </div> <div class= "Head" > Exit volume </div> <div class= "Head" > Hold amount </div> <div class= "Head" style= " border-right:0; " > Not dispatched </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> the red color first is the variable that needs to be used when scrolling in TS, which is an identifier. I struggled with this question for two days before I got it out. Be sure to remember that scrolling listener events are not on-scroll the code in 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; When the value in parentheses is marked in an HTML page, the name cannot be the same as other properties. If the file already has a Pnavs variable, an error will be made. 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 ': ' Guangzhou area ', ' arrivetickets ': ' 6987 ', ' monioutcnt ': ' 2221 ', ' monistaycnt ': ' A ', ' moniundeliverycnt ': ' Arrivetickets '}, {' ZoneName ': ' Shenzhen ', ' 2356 ': ' A ' and ' ' ' monioutcnt ': ' 331 ' , ' monistaycnt ': ' A ', ' moniundeliverycnt ': ' The ' 6744 '}, {' ZoneName ': ' Wuhan ', ' arrivetickets ': ' A ' ', ' ' monioutcnt ': ' 2621 ', ' Monistaycnt ': ' ' moniundeliverycnt ': ' 6542 '}, {' ZoneName ': ' Suzhou area ', ' arrivetickets ': ' A ', ', ' ' monioutcnt ': ' 2881 ', ' Monistaycnt ': ' moniundeliverycnt ': ' 2367 '}, {' ZoneName ': ' Hangzhou area ', ' arrivetickets ': ' The ', ' ' The ', ' ' monioutcnt ': ' 5621 ', ' Monistaycnt ': ' The ' moniundeliverycnt ': ' 1129 '}, {' ZoneName ': ' Dongguan District ', ' arrivetickets ': ' A ', ', ' ' ' monioutcnt ': ' 1221 ', ' Monistaycnt ': ' A ', ' moniundeliverycnt ': ' 7893 '}, {' ZoneName ': ' Huizhou District ', ' arrivetickets ': ' A ', ', ', ', ', ' ' monioutcnt ': ' 4521 ', ' Monistaycnt ': ' ' moniundeliverycnt ': ' 2356 '}, {' ZoneName ': ' Shantou ', ' arrivetickets ': ' The ' ', ' ' The ' ', ' monioutcnt ': ' 7821 ', ' Monistaycnt ': ' moniundeliverycnt ': ' 67554 '}, {' ZoneName ': ' Qingyuan District ', ' arrivetickets ': ' The ', ' ' The ' ', ' monioutcnt ': ' 9921 ', ' Monistaycnt ': ' A ', ' MoNiundeliverycnt ': ' ZoneName ': ' Changsha District ', ' arrivetickets ': ' 5534 ', ' monioutcnt ': ' 2221 ', ' monistaycnt ': ' 45 ', ' Moniundeliverycnt ': ' zoneName ': ' Yueyang area ', ' arrivetickets ': ' 6643 ', ' monioutcnt ': ' 2221 ', ' monistaycnt ': ' 45 ', ' Moniundeliverycnt ': ' zoneName ': ' Zhuzhou district ', ' arrivetickets ': ' 6546 ', ' monioutcnt ': ' 2221 ', ' monistaycnt ': ' 45 ', ' Moniundeliverycnt ': ' zoneName ': ' Nanchong ', ' arrivetickets ': ' 4353 ', ' monioutcnt ': ' 2221 ', ' monistaycnt ': ' 45 ', ' Moniundeliverycnt ': ' zoneName ': ' Anshan District ', ' arrivetickets ': ' 4526 ', ' monioutcnt ': ' 2221 ', ' monistaycnt ': ' 45 ', ' Moniundeliverycnt ': ' 44 '}]; city=["Hangzhou", "Zhengzhou", "Shanghai", "Guangzhou", "Hangzhou", "Hangzhou", "Hangzhou", "Hangzhou", "Hangzhou", "Hangzhou", "Hangzhou", "Hangzhou", "Hangzhou", "Hangzhou", "Hangzhou", "Hangzhou", "Hangzhou", "Hangzhou", "Hangzhou", "Hangzhou", "Hangzhou" , "Hangzhou", "Hangzhou", "Hangzhou",]; stylefor=["Nitrogen content", "Phosphorus content", "Potassium content", "nitrogen content", "Phosphorus content", "Potassium content", "nitrogen content", "Phosphorus content", "Potassium content", "nitrogen content", "Phosphorus content", "Potassium content", "nitrogen content", "Phosphorus content", "Potassium content", "nitrogen content", "Phosphorus content" "," potassium content ",]; 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) {//First open the data to be displayed 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; }
The code for TS red is the preceding HTML red, and then the addscrolleventlistener is monitored for scrollingNote: ionviewdidload () This is the method of IONIC3 itself, as long as the page is touched, you can call this method, either click or Pull. And then there's 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;} is the event CSS code that listens for events and can be triggered as soon as you swipe
*{
margin:0px;
padding:0px;
}
. focus{
height:150px;
width:100%;
ion-slide{
height:150px;
width:100%;
img{
height:150px;
width:100%;
}
}
}
. slide_product{
Rolling
ion-scroll{
width:100%;
height:800px;
}
ul{
List-style:none;
padding:0px 5px;
Ji=
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%; /* First Look at height 100% whether it works if it doesn't work we're going to set absolute positioning for the element */
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;
}
The code is as follows
2018-08-17
Use IONIC3 to make the last line and left line motionless, the function of the middle movement
