Tizen可穿戴式Web应用程序：当内容不在屏幕中央时，内容会变小

Question

我正在撰写 tizen可穿戴式网络应用，我注意到了一些事情。 （我有一个 gear s3 经典）。

在我的装备s3上的设置应用程序中，主页上列表中的列表项在不在屏幕中央时以及在中心时更小他们变大了。

我正在使用Tizen Studio，我已经下载了许多带有列表（网页和本机）的示例应用程序，但没有一个具有这个小功能。

我想知道我是否会遗漏某些东西，或者我应该怎样做才能达到这个效果。

非常感谢！

Answer 1

我最终用Javascript对所有内容进行了硬编码。

有3个事件：
scrollstart ：列表开始滚动时（即使使用挡板）
scrollend ：列表停止滚动时 已选择：当列表停止滚动时，它会在屏幕中间检测到li。

同样，这就像上面的答案一样，它触发了所选的＆＃39;列表停止滚动时的事件。

这是一个问题，因为让我说我的手指在屏幕上拖动（从下到上），列表快速滚动，我希望它通过li以使其被选中。 相反，它会一直滚动，当它停止时，它会触发“选择”＃39;适当的李。

- 编辑

好的，我终于找到了它！

以下是如何使用原生智能手表菜单制作滚动动画效果：

1. 创建新项目 - ＆gt;模板 - ＆gt;可穿戴 - ＆gt;网络 - ＆gt; tau list
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文件＆＃34; body＆＃34;结束标记

5. 向后倾斜并享受！

Answer 2

您可以从设置界面示例应用开始。

New Tizen项目＆gt;样品＆gt;可穿戴＆gt;网络＆gt; UI＆gt; （圆圈）设置UI

据我所知，在TAU中，当列表项目处于焦点或选中时，它可以在 css 中捕获为动态类“ .ui-snap-listview-selected ”。你可以在那里添加你的css代码，无论你喜欢什么（字体大小，颜色，动画）。

示例代码：

项目文件夹＆gt; css＆gt; 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的默认网络调试工具，可以查明此类事件。

Debug As＆gt; Tizen Web应用程序。