ionic3 水平滚动 + 点击元素滚动到某元素

Posted 2021-01-15 haoaixue2006

html

<ion-row>
        <ion-item no-lines>
          <ion-scroll  #card scrollX="true" class="ion-scrall-style" >
            <div #item (click)="onTap(avatar)" *ngFor="let avatar of avatars" class="scroll-item">
                <img src="{{avatar}}"/>
              </div>
          </ion-scroll>
        </ion-item>
      </ion-row>

 

CSS：

 .ion-scrall-style{
        white-space: nowrap;
        min-height: 200px;
        // height: 120px;
        overflow: hidden;
    
        .scroll-item {
          display: inline-block;
          background-color: #e74c3c;
          // height: auto;
          margin: 10px;
        }
      }

 

隐藏滚动条：

   /* Hide ion-content scrollbar */
      ::-webkit-scrollbar{
        display:none;
      }

 

Component

import { Component,AfterViewInit ,ViewChild, ViewChildren, ElementRef,QueryList} from ‘@angular/core‘;
import { NavController, Scroll } from ‘ionic-angular‘;
import { Content } from ‘ionic-angular‘;


@Component({
  selector: ‘page-home‘,

  templateUrl: ‘home.html‘
})
export class HomePage implements AfterViewInit{

    @ViewChild(‘card‘) card: any ;
    // @ViewChild(‘item‘) tiem: ElementRef ;
    @ViewChildren(‘item‘) items: QueryList<any>;
    @ViewChild(‘cardContent‘) cardContent: any;

    avatars:Array<string> = ["http://image.prntscr.com/image/15f7d1b8dca94296b249f56eb6cc78d3.png", 
    "http://image.prntscr.com/image/f2b0ac9e43334eddac9c1af05e573888.png",
     "http://image.prntscr.com/image/6915d39cf813481fa3c19fa292c582ba.png" ,
     "http://image.prntscr.com/image/ad357d428faf4e88ab3bdac78782b523.png",
      "http://image.prntscr.com/image/7e98362d62b2490c998fe1472dcb0601.png" ,
       ];
    
  constructor(public navCtrl: NavController)  {

  }

  ngAfterViewInit() {
   
  }


onTap(src: string) {
    // console.log(avatar);
    let index = this.avatars.indexOf(src);
    let element = this.items.toArray()[index];
    this.card._scrollContent.nativeElement.scrollLeft = element.nativeElement.offsetLeft;
}

}