请求提供一个tizen代码的例子，可以滚动一个<div>的边框。

问题描述 投票：0回答：2

我正在寻找一个可以在tizen中工作的web应用程序，它可以滚动一个带有旋转边框的div。

我已经花了一些时间试图让它工作......我发现我自己在第三天又读了一遍同样的链接 :) :https:/developer.tizen.orgkodevelopmentguidesweb-applicationuser-interfacetizen-advanced-uiapplications-circular-uihandling-rotary-events?langredirect=1#pagescroll

https:/developer.tizen.orgkoforumsweb-application-developmentscrolling-content-bezel?langswitch=ko。

它不为我工作，虽然在另一个模板应用程序，我能够改变一些文字，当边框被旋转（我的Gear S3）。滚动页面有点不同。似乎我在选择正确的DOM或事件监听器添加滚动器时遇到了问题......

我的例子基于链接。

window.onload = function () {
	
	var SCROLL_STEP = 50, /* Distance of moving scroll for each rotary event */
    page = document.getElementById('main'); /* Query with page ID */

page.addEventListener('popupshow', function popupOpenHandler(e) {
    var popup = e.target, /* Popup element */
        /* Element that has scroll */
        scroller = popup.querySelector('.ui-popup-wrapper'),

        /* Rotary event handler */
        rotaryEventHandler = function(e) {
            if (e.detail.direction === 'CW') {
                /* Right direction */
                scroller.scrollTop += SCROLL_STEP;
            } else if (e.detail.direction === 'CCW') {
                /* Left direction */
                scroller.scrollTop -= SCROLL_STEP;
            }
        };

    /* Register the rotary event */
    document.addEventListener('rotarydetent', rotaryEventHandler, false);

    /* Deregister the rotary event */
    popup.addEventListener('popuphide', function popupHideHandler() {
        popup.removeEventListener('popuphide', popupHideHandler, false);
        document.removeEventListener('rotarydetent', rotaryEventHandler, false);
    }, false);
}, false);

page.addEventListener('pagebeforeshow', function pageScrollHandler(e) {
    var page = e.target;
    elScroller = page.querySelector('.ui-scroller');

    /* Rotary event handler */
    rotaryEventHandler = function(e) {
        if (e.detail.direction === 'CW') {
            /* Right direction */
            elScroller.scrollTop += SCROLL_STEP;
        } else if (e.detail.direction === 'CCW') {
            /* Left direction */
            elScroller.scrollTop -= SCROLL_STEP;
        }
    };

    /* Register the rotary event */
    document.addEventListener('rotarydetent', rotaryEventHandler, false);

    /* Deregister the rotary event */
    page.addEventListener('pagebeforehide', function pageHideHandler() {
        page.removeEventListener('pagebeforehide', pageHideHandler, false);
        document.removeEventListener('rotarydetent', rotaryEventHandler, false);
    }, false);

}, false);
	
	
};
* {
    font-family: Verdana, Lucida Sans, Arial, Helvetica, sans-serif;
}

body {
    margin: 0px auto;
    background-color:#CCCCCC;
}

.contents {
	display: flex;
	display: -webkit-flex;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	height:320px;
}


.content_text {
	font-weight:bold;
	font-size:5em;
	color:#fff;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="Tizen Wearable basic template generated by Samsung Wearable Web IDE"/>

    <title>Tizen Wearable Web IDE - Tizen Wearable - Tizen Wearable basic Application</title>

    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script src="js/main.js"></script>
</head>

<body>


<div class="ui-page ui-page-active" id="main">
   <header class="ui-header">
      <h2 class="ui-title">TAU Basic</h2>
   </header>
   <div class="ui-content">
      <a href="#popup" data-rel="popup">Open Popup</a>
     	<p>Hello World!</p>
		<p>Hello World!!!!!</p>
		<p>Hello World!</p>
		<p>Hello World!!!!!</p>
		<p>Hello World!</p>
		<p>Hello World!!!!!</p>
		<p>Hello World!</p>
		<p>Hello World!!!!!</p>
		<p>Hello World!</p>
		<p>Hello World!</p>
		<p>Hello World!!!!!</p>
		<p>Hello World!</p>
		<p>Hello World!!!!!</p>
		<p>Hello World!</p>
		<p>Hello World!!!!!</p>
		<p>Hello World!</p>
		<p>Hello World!!!!!</p>
		<p>Hello World!</p>
		<p>Hello World!</p>
		<p>Hello World!!!!!</p>
		<p>Hello World!</p>
		<p>Hello World!!!!!</p>
		<p>Hello World!</p>
		<p>Hello World!!!!!</p>
		<p>Hello World!</p>
		<p>Hello World!!!!!</p>
		<p>Hello World!</p>
   </div>
   <!--Popup-->
   <div id="popup" class="ui-popup">
      <div class="ui-popup-content">
        <p>Hello World!</p>
		<p>Hello World!!!!!</p>
		<p>Hello World!</p>
		<p>Hello World!!!!!</p>
		<p>Hello World!</p>
		<p>Hello World!!!!!</p>
		<p>Hello World!</p>
      </div>
      <div class="ui-popup-footer ui-bottom-button">
         <a id="1btnPopup-cancel" href="#" class="ui-btn" data-rel="back">Check</a>
      </div>
   </div>
</div>


</body>
</html>
javascript rotation tizen
2个回答
1
投票

你的代码不工作，因为你添加事件监听器的 "pagebeforeshow "太晚。

而不是这样。

window.onload = function () {
 ...
};

试试

window.addEventListener("DOMContentLoaded", function () {
 ...
});

把你的... main.js TAU库上面的文件。

    <link href="tau/wearable/theme/default/tau.css" rel="stylesheet" />
    <link href="tau/wearable/theme/default/tau.circle.css" rel="stylesheet" />
    <link href="style.css" rel="stylesheet" />
    <link href="css/style.circle.css" rel="stylesheet" />
    <script src="js/main.js"></script>
    <script src="tau/wearable/js/tau.js"></script>
</head>

我也鼓励你在我们Github上的项目中创建一个issue (https:/github.comSamsungTAU。)如果遇到什么问题可以改进。

0
投票

谢谢大家。虽然我不能让它这样工作......(也许有其他问题)我设法找到了工作的解决方案，这有点不同。

(function() {
	
var page = document.getElementById('main');  // <div id="main" class="container">
	
document.getElementById('main').setAttribute('tizen-circular-scrollbar', '');

function rotaryDetentHandler (e) {
    var direction = e.detail.direction;

	if (direction === "CW") {
		page.scrollTop += 50;
	} 
	else if (direction === "CCW") {
		page.scrollTop -= 50;
	}

}
	
document.addEventListener('rotarydetent', rotaryDetentHandler);	




//add eventListener for tizenhwkey
document.addEventListener('tizenhwkey', function(e) {
    if (e.keyName === "back") {
        try {
            tizen.application.getCurrentApplication().exit();
        } catch (ignore) {
        }
    }
});


}());
html,
body {
    width: 360px;
    height: 360px;
    margin: 0;
    padding: 0;
    background-color: #fff;
}

.container {
    background-color: #000;
    color: #fff;
    height: 100%;
    width: 100%;
    text-align: center;
    overflow-y: auto;
}

#news-view {
    background-color: #fff;
    color: #000;
}
<!DOCTYPE html>
<html>
	<head>
	    <meta charset="utf-8" />
	    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
	    <meta name="description" content="Tizen Wearable basic template generated by Samsung Wearable Web IDE"/>
	
	    <title>Tizen Wearable Web IDE - Tizen Wearable - Tizen Wearable basic Application</title>
	
	    <link rel="stylesheet" type="text/css" href="css/style.css"/>
	    <script src="js/main.js"></script>
	</head>
	
	<body>
	
	
	
		<div id="main" class="container">

	      
	    <p>Hello World!</p>
			<p>Hello World!!!!!</p>
			<p>Hello World!</p>
			<p>Hello World!!!!!</p>
			<p>Hello World!</p>
			<p>Hello World!!!!!</p>
			<p>Hello World!</p>
			<p>Hello World!!!!!</p>
			<p>Hello World!</p>
			<p>Hello World!</p>
			<p>Hello World!!!!!</p>
			<p>Hello World!</p>
			<p>Hello World!!!!!</p>
			<p>Hello World!</p>
			<p>Hello World!!!!!</p>
			<p>Hello World!</p>
			<p>Hello World!!!!!</p>
			<p>Hello World!</p>
			<p>Hello World!</p>
			<p>Hello World!!!!!</p>
			<p>Hello World!</p>
			<p>Hello World!!!!!</p>
			<p>Hello World!</p>
			<p>Hello World!!!!!</p>
			<p>Hello World!</p>
			<p>Hello World!!!!!</p>
			<p>Hello World!</p>        
		            
		</div>
	
	
	
	
	</body>
	<script src="js/main.js"></script>

</html>
0
投票

在你的第一个例子中，你使用了 "pagebeforeshow"、"popup show"、"popup hide "等事件。这些事件是针对TAU框架和JQueryMobile的，所以我认为你在你的应用中使用了TAU。这可能就是为什么解决方案没有工作的原因。

你最新的解决方案只是在一个没有TAU库的web应用程序中滚动内容。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.