Когда мобильный терминал ограничен размером экрана и отображает много контента, некоторые области необходимо провести. Эта статья показывает все пути в проекте. Вы можете выбрать соответствующий метод скольжения в соответствии с вашими потребностями. Основной принцип скольжения состоит в том, что есть два контейнера A и B. Если A находится во внешнем слое, а B находится во внутреннем слое; Если A находится в ширине или высоте внешнего слоя A установлена, ширина или высота контейнера внутреннего слоя B можно свернуть.
Метод реализации
1). Ион-прокрутка
Используйте скользящие команды, которые поставляются с ионным
<Ion-view View-title = "Dashboard"> <Ion-Content has-bouncing = "false"> <Ion-Scroll has-bouncing = "false" direction = "x"> <viv> Ион-прокрут осознает скольжение и использует скользящий компонент, предоставляемый Ionic для достижения скольжения. Для других ионо-прокручивающих свойств, пожалуйста, обратитесь к официальному документу веб-сайта </div> </ion-scroll> </iOn-content> </ion-view>
2). переполнение CSS
<ion-view view-title="Dashboard"> <ion-content has-buncing="false" overflow-scroll="true"> <div> <div> Use the overflow attribute of css or scroll to implement scroll, use the overflow attribute of css or scroll to implement scrolling, use the overflow attribute of css or scroll to implement scrolling, use the overflow attribute of css or Прокрутите, чтобы реализовать прокрутку, используйте атрибут переполнения CSS или прокрутки для реализации прокрутки, используйте атрибут переполнения CSS или прокрутки для реализации прокрутки, используйте атрибут переполнения CSS или прокрутки для реализации прокрутки </div> </div> </ion-content> </ion-view>.
• Переполнение: Авто, если содержимое обрезано, браузер отображает прокрутку, чтобы просмотреть остальные.
• Переполнение: содержимое прокрутки будет обрезано, но в браузере отобразится прокрутка, чтобы просмотреть остальные.
Примечание. Таким образом, ионо-контент должен добавить директиву Ouplow-scroll = "true", чтобы указать, что собственная прокрутка системы используется вместо прокрутки Ionic. Ионовый реализует свой собственный набор методов прокрутки.
Слушайте события Touch
<div id = "dash_scroll_container"> <div ng-repeat = "d in data" style = "margin-ruight: 20px; граница: твердый 1px #ffc900; высота: 100%; ширина: 100px; дисплей: встроенный челк;
Соответствующий JS
Angular.Module ('Starter.Controllers', []). Controller ('dashctrl', function ($ scope) {$ scope.datas = [1,2,3,4,5,5,7,8,9,10]; var startx = 0, starty = 0; var $ domscroll = $ ("#dash_scroll_container"); $ domscroll.on ("touchStart", function (e) {startx = e.originalevent.changedtouches [0] .pagex; starty = e.originalevent.changedtouches [0] .pagey; console.log ("start :("+startx+","+starty+")"+"-+$ (thish). $ domscroll.on ("touchmove", function (e) {var x = e.originalevent.changedtouches [0] .pagex-startx; var y = e.originalevent.changedtouches [0] .pagey-starty; if (math.abs (x)> math.abs (y)) {/slide rallle; if (math.abs (y)> math.abs (x)) {// Сдвиг вверх и вниз по Scrolltop ($ (this), y); E.PreventDefault (); e.stoppropagation ();}});})Прислушиваясь к событиям TouchStart и Touchmove пальца, получается скользящее расстояние, и прокрутка полоса внешнего контейнера вызывается для прокрутки на соответствующее расстояние.
• $ (селектор) .scrollleft (положение): установите горизонтальное положение прокрутки элемента
• $ (селектор) .scrolltop (положение): установите положение вертикального прокрутки элемента
Наконец, используйте команду AngularJS, чтобы инкапсулировать прокрутку прослушивания в одну инструкцию, которая удобна для использования во время скольжения в будущем.
Добавить в Directive.js:
Angular.Module ('Starter.Directives', []). Directive ('myscroll', function () {function link ($ acpope, element, attrs) {var $ domscroll = $ (element [0]); var startx = 0, starty = 0; $ domscroll.on ("touchStart", function (e) { startx = e.originalevent.changedtouches [0] .pagex; = e.originalevent.changedtouches [0] .pagex-startx; // Сдвиг вверх и вниз Scrolltop ($ (this), y); e.stoppropagation (); return {ограничить: 'a', link: link};});Таким образом, его удобно использовать после инкапсуляции, и добавить инструкцию, которую моя прокрутка к элементам, которые должны скользить.
<div my-scroll style = "border: slateblue solid 1px; ширина: 100%; высота: 300px; переполнение: скрыто; маржа: 0; накладка: 0;"> <div> <div ng-repeat = "d в данных" Стиль = "Маржинальный рост: 20px; граница: твердый 1px. #007aff; высота: 80px; text-align: center; line-height: 80px; "> region {{d}} </div> </div> <div> <div> <div ng-repeat =" d в данных "style =" Margin-bottom: 20px; #Ffc900; Высота: 80px; Text-align: center; line-hight: 80px; "> {{d}} каждая строка </div> </div> </div> </div>Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.