Question

我正在尝试将一个滚动条添加到使用Caph制作的Tizen TV应用中的少数组件。我不知道滚动条在Tizen中的外观如何或如何正确添加它。

以下是API参考中的示例。文档并没有多说。

var Scrollbar = caph.ui.base.component.Scrollbar;

 var horizontal = new Scrollbar({
   direction: Scrollbar.HORIZONTAL,
   currentThumbPosition: 300,
   maxThumbPosition: 600,
   sizeValue: 600,
   position: [50, 50, 0],
   on: {
       change: function(message) {
           console.log(message.detail);
       }
   }
});

我是否需要拇指元素组件或任何可以拇指指定的东西？如果我在小时候添加“拇指”，滚动条将如何知道？或者我将滚动条作为子项添加到另一个组件？我尝试了几乎无法想象的任何事情。

感谢您的帮助。

Answer 1

您可以使用以下代码，不要忘记在此代码之前包含以下css和js文件。

袖口-2.1.1-150302.min.css
袖口-2.1.1-150302.min.js
caph.theme.stripe-2.1.1-150302.min.css
caph.theme.stripe-2.1.1-150302.min.js

以上文件可在 Caph Full package 中找到，可在此处下载。

<!DOCTYPE html>
<html>
<head>
    <title>Caph Scrollbar</title>
    <meta charset="UTF-8"/>
<!--Kindly keep an eye on how to include below css and js files.-->
    <link rel="stylesheet" type="text/stylesheet" href="$CAPH/2.1.1/caph-2.1.1-150302.min.css"/>
    <script type="text/javascript" src="$CAPH/2.1.1/caph-2.1.1-150302.min.js"></script>
    <link rel="stylesheet" type="text/stylesheet" href="$CAPH/2.1.1/caph.theme.stripe-2.1.1-150302.min.css"/>
    <script type="text/javascript" src="$CAPH/2.1.1/caph.theme.stripe-2.1.1-150302.min.js"></script>
</head>
<body>
    <script>
        var Scrollbar = caph.require('stripe.ui.component.Scrollbar');

        caph.app.addScene('scrollScene', $class({
            $extends : caph.require('ui.base.Scene'),

            oncreate: function() {
                this.addChild(new Scrollbar({
                    direction: caph.ui.base.component.Scrollbar.HORIZONTAL,
                    currentThumbPosition: 150,
                    maxThumbPosition: 400,
                    sizeValue: 400,
                    step: 10,
                    position: [50, 30]
                }));

                this.addChild(new Scrollbar({
                    sizeValue: 300,
                    currentThumbPosition: 150,
                    maxThumbPosition: 300,
                    position: [50, 110]
                }));
            }
        })).run();
    </script>
</body>
</html>

如何在Caph Tizen智能电视应用中正确使用滚动条？

1 个答案: