Tizen可穿戴Web應用程序：內容越來越小，當不在屏幕中心

我正在寫Tizen可穿戴Web應用程序，我注意到了一些東西。（我有一個齒輪s3經典）。Tizen可穿戴Web應用程序：內容越來越小，當不在屏幕中心

在我輪s3設置應用程序，在列表中的主頁上的列表項是小的時候沒有在屏幕的中心，當他們在市中心，他們得到更大。

我正在使用Tizen Studio，我已經下載了許多示例應用程序與列表（網絡和本機），但沒有一個有這個小小的功能。

我想知道如果我錯過了什麼，或者我應該怎麼做才能達到這個效果。

非常感謝！

來源

2017-01-09 Christos Christou

我最終硬編碼在Javascript中的一切。

有3個事件：
scrollstart：當列表開始滾動（即使有邊框）
scrollend：當列表停止滾動它檢測到李：當
選擇列表停止滾動屏幕中間。

同樣，這個工作就像上面的回答，它在列表停止滾動時觸發'selected'事件。

這是一個問題，因爲比方說，我將手指拖過屏幕（從底部到頂部），並且列表快速滾動，我希望在它傳遞給它時選擇它。相反，它會一直滾動，當它停止時，它會觸發'選擇'到適當的li。

--edit

好吧，我終於找到了！

這裏是你怎麼做滾動動畫效果就像原生的SmartWatch菜單：

創建一個新的項目 - >模板 - >可穿戴 - >網絡 - >頭列表
創建在項目中list.js文件

拷貝真棒代碼文件中：

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,};}});

將腳本連接到html文件右下方的「body」結束標記
靠背和享受！

來源

2017-01-11 22:09:21

您可以從設置UI示例應用程序開始。

新的Tizen項目>樣品>耐磨>網絡> UI>（圓）設置UI

據我所看到的，在TAU當列表項是焦點或選擇它可以在被捕獲css as dynamic class'.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%; 
}

我會建議使用 '谷歌網絡督察'，這是默認的網絡調試工具與Tizen工作室精確定位此類事件。

Debug As> Tizen Web應用程序。

來源

2017-01-10 10:06:54

非常感謝！真棒回答！您的解決方案有效，但速度很慢（不像手錶的本地菜單）。從一個元素到另一個元素的過渡完成後，尺寸變大。有什麼解決方法嗎？（另一個觸發器，或者它可以更快地觸發？） –

Tizen可穿戴Web應用程序：內容越來越小，當不在屏幕中心

回答

相關問題