Tizen Wearable Web 应用程序：内容在不在屏幕中央时变小

Question

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

在我的 gear s3 上的设置应用程序中，主页列表中的 列表项 不在屏幕中央时 较小，并且当它们位于中心时，它们会变大。

我使用的是 Tizen Studio，我已经下载了许多带有列表的示例应用程序（Web 和本机），但其中 none 个具有这个不错的小功能。

我想知道我是否遗漏了什么或者我应该怎么做才能达到这个效果。

非常感谢！

Answer 1

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

新建 Tizen 项目 > 示例 > 可穿戴设备 > Web > UI >（圆圈）设置 UI

据我所知，在 TAU 中，当列表项处于焦点或被选中时，它可以在 css 中捕获为动态 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%;
}

我建议使用 'Google Web Inspector'，这是 Tizen Studio 的默认 Web 调试工具来查明此类事件。

调试为 > Tizen Web 应用程序。

Answer 2

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

有 3 个事件：
scrollstart : 当列表开始滚动时（即使有边框）
scrollend : 当列表停止滚动时
selected : 当列表停止滚动时，它检测到屏幕中间的 li。

同样，这与上面的答案一样，它在列表停止滚动时触发 'selected' 事件。

这是一个问题，因为假设我在屏幕上拖动手指（从底部到顶部）并且列表快速滚动，我希望在它通过 li 时将其选中。 相反，它会一直滚动，当它停止时，它会触发 'selected' 到适当的 li。

--编辑

好的，我终于找到了！！

以下是制作滚动动画效果的方法就像原生智能手表菜单一样：

创建一个新项目 -> 模板 -> wearable -> web -> tau list
在项目中创建一个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 文件
向后靠，享受吧！

Tizen Wearable Web 应用程序：内容在不在屏幕中央时变小

Tizen Wearable Web app: Content getting smaller when not in the center of the screen

javascript

css

tizen

tizen-wearable-sdk

tizen-web-app