Tizen Wearable Web-приложение: контент становится меньше, если не находится в центре экрана

Question

Я пишу tizen носимые веб-приложения и я что-то заметил. (У меня есть коробка s3 classic).

В приложении настройки на моих передачах s3, то элементов списка в списке на главной странице меньше, если не в центре экрана, и когда они находятся в центре, они получают больше.

Я использую Tizen Studio, и я загрузил множество примеров приложений со списками (веб-и родными), но ни один из них не имел этой небольшой приятной функции.

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

спасибо!

Answer 1

Я закончил hardcoding все в Javascript.

Есть 3 события:
scrollstart: Когда список начинается прокрутка (даже с рамкой)
scrollend: Когда список остановки прокрутки
выбран: Когда список останавливает прокрутку обнаруживает литиево в в середине экрана.

Снова, это работает как ответ выше, запускает событие «selected», когда список перестает прокручиваться.

Это проблема, потому что, скажем, я перетаскиваю палец по экрану (снизу вверх), а список быстро прокручивается, Я хочу, чтобы к моменту, когда он пройдет ли, чтобы сделать его выбранным. Вместо этого он будет прокручиваться полностью, и когда он остановится, он затем выведет «выбранный» в соответствующий ли.

--edit

Хорошо, я, наконец, нашел его !!

Вот как сделать эффект прокрутки анимации так же, как родной SmartWatch меню:

1. Создать новый проект -> Шаблон -> носимый -> Веб -> список тау
2. Создать list.js файл в проекте

3. Скопируйте этот удивительный код в файле:

   define({ 
   name: 'helpers/list', 
   requires:['helpers/dom'], 
   def: function list(domHelper){ 
       'use strict'; 
       var listHelper = null, 
        scrolledElement = null; 
       function addAnimation(page){ 
       var list = null; 
       scrolledElement = page.querySelector('.ui-scroller'); 
       if (scrolledElement){list = scrolledElement.querySelector('.ui-listview');} 
       if (scrolledElement && list){ 
        listHelper = tau.helper.SnapListStyle.create(list, {animate: 'scale'}); 
        scrolledElement.setAttribute('tizen-circular-scrollbar', ''); 
       } 
       } 
       function removeAnimation(){ 
       if (listHelper){ 
        listHelper.destroy(); 
        listHelper = null; 
        if (scrolledElement){scrolledElement.removeAttribute('tizen-circular-scrollbar');} 
       } 
       } 
       function onPageBeforeShow(){addAnimation(this);} 
       function onPageBeforeHide(){removeAnimation();} 
       function animate(page){ 
       if (page.classList.contains('ui-page-active')){addAnimation(page);} 
       page.addEventListener('pagebeforeshow', onPageBeforeShow); 
       page.addEventListener('pagebeforehide', onPageBeforeHide); 
       } 
       return{animate: animate,};}}); 
   

4. Подключить скрипт к html-файлу прямо под тегом закрытия тега

5. Откиньтесь назад и наслаждайтесь!

Answer 2

Вы можете начать с приложения настройки UI.

Нового Tizen проект> Примеры> носимая> Web> UI> (круг) Настройка интерфейс

Насколько я видел, в ТАУ, когда элемент списка на фокусе или выбран он может быть захвачен в css как динамический класс '.ui-snap-listview-selected'. Вы можете добавить свой код css там, независимо от ваших предпочтений (размер шрифта, цвет, анимация).

Пример кода:

папка проекта> CSS> style.css

.li-has-thumb-left.ui-snap-listview-item { 
    font-size: 60%; 
} 

.li-has-thumb-left.ui-snap-listview-item.ui-snap-listview-selected { 
    font-size: 180%; 
} 

Я хотел бы предложить использовать 'Google Web Inspector', который является веб-отладки инструмент по умолчанию с Tizen Studio, чтобы точно определить такие события.

Отладка Как> Tizen Web-приложение.