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

我正在编写tizen可穿戴web应用程序，我注意到了一些东西。（我有一个齿轮s3经典型）

在my gear s3的设置应用程序中，主页上列表中的列表项如果不在屏幕中央，则会变小，如果位于屏幕中央，则会变大。

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

我想知道我是否错过了什么，或者我应该做些什么来达到这个效果

---

多谢各位

您可以从设置UI示例应用程序开始

新Tizen项目>示例>可穿戴>网络>用户界面>（圆圈）设置用户界面

就我所见，在TAU中，当列表项处于焦点或选中时，它可以在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%;
}

我建议使用“GoogleWebInspector”，这是TizenStudio的默认Web调试工具，可以精确定位此类事件

---

调试为>Tizen Web应用程序。

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

共有3个事件：
scrollstart：当列表开始滚动时（即使有挡板）
滚动结束：当列表停止滚动时
<强>选择< /强>：当列表停止滚动时，它会检测屏幕中间的Li。

同样，这与上面的答案类似，当列表停止滚动时，它会触发“选定”事件。

这是一个问题，因为假设我用手指在屏幕上拖动（从下到上），列表快速滚动，我希望在它经过一个li时将其选中。相反，它将一直滚动，当它停止时，它将触发“已选”到相应的li

--编辑

好的，我终于找到了

以下是如何使滚动动画效果与本机smartwatch菜单类似：

创建新项目->模板->可穿戴->网络->tau列表

在项目中创建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,};}});

将脚本连接到“body”结束标记正下方的html文件

向后靠，尽情享受吧

---

非常感谢你！真棒的回答！您的解决方案可以工作，但速度很慢（不像手表的本机菜单），从一个元素到另一个元素的转换完成后，大小会变大。有什么解决办法吗？（另一个触发器，或者是否可以更快地触发？）