javascript - Tizen 可穿戴 Web 应用程序 : Content getting smaller when not in the center of the screen

Question

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

在我的 gear s3 上的设置应用程序中，主页上列表中的列表项在不在屏幕中央时和在屏幕中央时较小，它们变大了。

我正在使用 Tizen Studio，我已经下载了许多带有列表的示例应用程序(Web 和 native )，但没有一个具有这个不错的小功能。

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

非常感谢!

Answer 1

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

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

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

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

--编辑

好吧，我终于找到了!!

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

1. 创建一个新元素 -> 模板 -> wearable -> web -> 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. 将脚本连接到“body”结束标记正下方的 html 文件

5. 向后靠，享受吧!