2016-07-28 3 views
1

любым способом сделать $ anchorScroll в ионном 2/Angular2 с углового 1.x?

Пытается прокрутить элемент на странице. Я пытался что-то вроде NG2-страницы прокрутки https://github.com/Nolanus/ng2-page-scroll

не уверен, если я делаю это правильно, я последовал за учебником и получил сообщение об ошибке:

ParseError: 'import' and 'export' may appear only with 'sourceType: module' 

Я думаю, что не работает с последними ионными 2 релиз. только хотите, чтобы это было проще, любая работа вокруг?

ответ

0

Я был в той же ситуации, где мне нужно было перейти к следующей странице/элементу для каждого нажатия кнопки.

Я рассмотрел те же варианты, о которых вы упомянули, и я обнаружил, что в ионных слайдах (http://ionicframework.com/docs/v2/api/components/slides/Slides/) вы можете установить направление на «вертикальное», что сделало трюк для меня.

Не знаю, может ли он помочь вам в использовании.

В противном случае вы можете ознакомиться с Контентом и функцией scrollTo. http://ionicframework.com/docs/v2/api/components/content/Content/

+0

Однако я имею дело с большим количеством информации JSON с * ngFor, использование слайдов вызовет проблемы с производительностью. но я догадываюсь, что ваш ответ был самым близким обходным путем hv с ионным2. scrollTo работает только для меня, когда я использую его в магазине и загружаю позиции прокрутки «последний раз просматривал» ... поскольку он не мог получить местоположение элемента, жидкостная компоновка на разных устройствах/размерах экрана могла бы победить цель ... но thx для предложения , –

4

Я не знаю, если вы все еще сталкиваетесь с этой проблемой, но это может быть решен с помощью его YourHTMLelement.getBoundingClientRect(), который возвращает границу этого элемента, как сверху, справа, снизу и слева.

С этим вы можете использовать функции content и scrollTo(left, top, duration). Я создал функцию для прокрутки по вертикали на конкретный элемент, который выглядит как:

scrollToElement(id) { 
    var el = document.getElementById(id); 
    var rect = el.getBoundingClientRect(); 
    // scrollLeft as 0px, scrollTop as "topBound"px, move in 800 milliseconds 
    this.content.scrollTo(0, rect.top, 800); 
} 

Но вы можете изменить его так, как вы хотите также прокрутки по горизонтали, с параметром scrollLeft.

+1

У меня проблемы с 'el.getBoundingClientRect()', дающие не надежные результаты. Простой 'el.offsetTop' делает трюк для меня. –

Смежные вопросы