Webix предоставляет широкий спектр инструментов для управления прокруткой страницы.
По умолчанию Webix использует нативные полосы прокрутки браузера. В версии Webix Pro вам доступны полосы прокрутки от Webix.
По умолчанию у компонента вертикальная выбрана вертикальная прокрутка. Вы можете изменить направление прокрутки через свойство scroll, которое принимает следующие значения:
webix.ui({
view:"list",
id:"mylist",
scroll:"x", //"y", "xy", "auto", false
// ... конфиг
});
У некоторых компонентов есть свойства scrollX и scrollY, который принимают значения boolean и блокируют/устанавливают направление прокрутки. Ознакомьтесь с API для более подробной информации.
При динамической загрузке доступна только часть данных, которая загрузилась после инициализации компонента. Каждый раз, когда вы прокручиваете компонент, он посылает запросы на сервер, чтобы получить следующую порцию данных.
Читайте подробнее о динамической загрузке.
Если объём данных компонента слишком велик, хорошо бы задать возможность прокрутки к определённой его части при щелчке по кнопке.
Как это сделать:
1. Используйте метод компонента scrollTo(x,y):
Метод вызывается у объекта scrollview и принимает вертикальную и горизонтальную позиции. Если вы хотите указать ID кнопки в качестве позиции, код будет следующим:
{ view:"scrollview", id:"verses", body:{/* содержимое */} },
{
view:"button", value:"Imitation of Spenser", id: "130",
width:250, click:function(id){
$$("verses").scrollTo(0, id*1); // прокручивает к позиции top:130px
}
}
При разработке текущее значение прокрутки можно вычислить с помощью метода getScrollState(), который возвращает объект с параметрами X и Y.
Для сенсорных устройств вы можете указать продолжительность прокрутки. Укажите время в миллисекундах в свойство scrollSpeed.
webix.ui({
view:"list",
scrollSpeed:"100ms",
// ...
});
2. Прокрутка к необходимому компоненту внутри scrollview.
В этом случае ID кнопки нужно связать с ID ряда в scrollview:
{ view:"button", value: "Verse 1", id: "1", click:scroll},
{ view:"button", value: "Verse 2", id: "2", click:scroll},
Метод showView() задаёт "фокус" элемнту в scrollview с соответсвующим ID.
webix.ui({
view:"scrollview",
id:"verses",
body:{
rows:[
{ id:"verse_1", template:"...Some long text"},
{ id:"verse_2", template:"...Some long text"}
]
});
function scroll(id){
$$("verses").showView("verse_"+id);
}
3. Показать определённый элемент по его ID:
$$("mylist").showItem(5); // список должен быть прокручиваемый
Related sample: Horizontal List
Внутри Datatable прокрутка осуществляется с помощью следующих методов:
Позиция определяется тем, как далеко пользователь прокрутил содержимое от его верхней и левой изначальных точек. Если указана только горизонтальная или вертикальная полоса прокрутки, позиция включает в себя только значение X или Y соответственно.
С помощью метода getScrollState() можно получить текущую позицию прокрутки:
var scPos = $$("mylist").getScrollState(); // возвращает данные в виде ({x:30,y:200})
var posx = scPos.x; // 30
var posy = scPos.y; // 200
Доступна в версии Webix Pro.
Webix предлагает свои полосы прокрутки вместо нативных полос бразуера. Преимущества полос прокрутки от Webix:
Эта особенность доступна из модуля CustomScroll, который нужно активировать перез использованием.
Убедитесь, что обернули код в функцию webix.ready(), которая срабатывает после загрузки страницы:
webix.ready(function(){
// активируем CustomScroll
if (!webix.env.touch && webix.env.scrollSize)
webix.CustomScroll.init();
// ваше приложение на Webix
webix.ui({
// ...
});
});
Наверх