tinyjs-plugin-scroller
Version:
57 lines (54 loc) • 1.93 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>tinyjs-plugin-scroller DEMO</title>
<meta content="yes" name="apple-mobile-web-app-capable"/>
<meta content="yes" name="apple-touch-fullscreen"/>
<meta content="telephone=no,email=no" name="format-detection"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
<style>
html, body, p, div {margin:0;padding:0;}
</style>
</head>
<body>
<script src="https://gw.alipayobjects.com/os/lib/tinyjs/tiny/1.2.4/tiny.js"></script>
<script src="../dist/index.debug.js"></script>
<script type="text/javascript">
var app = new Tiny.Application({
height: 400,
width: 400,
fixSize: true,
});
var ant = Tiny.Sprite.fromImage('https://gw.alipayobjects.com/as/g/tiny/resources/1.0.0/images/ants/einstein.png');
var container = new Tiny.Container();
var scroller = new Tiny.Scroller(function (left, top, zoom) {
container.position.y = -top;
}, {
scrollingY: true,
});
scroller.setDimensions(Tiny.WIN_SIZE.width, Tiny.WIN_SIZE.height, Tiny.WIN_SIZE.width, Tiny.WIN_SIZE.height);
container.interactive = true;
container.hitArea = new Tiny.Rectangle(0, 0, Tiny.WIN_SIZE.width, Tiny.WIN_SIZE.height);
container.addChild(ant);
container.on('pointerdown', function (data) {
var e = data.data.originalEvent;
scroller.doTouchStart(e.touches || [e], e.timeStamp);
});
container.on('pointermove', function (data) {
var e = data.data.originalEvent;
scroller.doTouchMove(e.touches || [e], e.timeStamp, e.scale);
});
container.on('pointerup', function (data) {
const e = data.data.originalEvent;
scroller.doTouchEnd(e.timeStamp);
});
// 移出屏幕的事件监听
container.on('pointerupoutside', function (data) {
const e = data.data.originalEvent;
scroller.doTouchEnd(e.timeStamp);
});
app.run(container);
</script>
</body>
</html>