tinyjs-plugin-scroller

滚动插件

查看demo

http://tinyjs.net/plugins/tinyjs-plugin-scroller.html#demo

引用方法

• 推荐作为依赖使用

  • npm install tinyjs-plugin-scroller --save

• 也可以直接引用线上cdn地址，注意要使用最新的版本号，例如：

  • https://gw.alipayobjects.com/os/lib/tinyjs-plugin-scroller/0.1.1/dist/index.js
  • https://gw.alipayobjects.com/os/lib/tinyjs-plugin-scroller/0.1.1/dist/index.debug.js

起步

首先当然是要引入，推荐NPM方式，当然你也可以使用CDN或下载独立版本，先从几个例子入手吧！

1、最简单的例子

我们通过dom来演示一下：

<divclass="cell"><divid="J-container" class="container">
1</br>2</br>3</br>4</br>5</br>6</br>7</br>8</br>9</br>10
</div></div>
// 引用 Tiny.js 源码
<scriptsrc="https://gw.alipayobjects.com/as/g/tiny/tiny/1.2.0/tiny.js"></script>

html,body,div {
margin:0;
padding:0;
}
.cell {
height:400px;
overflow-y: hidden;
background-color:#f5f5f5;
}
.container {
font-size:72px;
}

require('tinyjs-plugin-scroller');// 或者// import Scroller from 'tinyjs-plugin-scroller';varcontainer=document.getElementById('J-container');varscroller=newTiny.Scroller(function(left,top,zoom){container.style.transform='translateY('+-top+'px)';},{scrollingY: true,});// 设置滚动的规模，参数依次是 clientWidth, clientHeight, contentWidth, contentHeightscroller.setDimensions(window.innerWidth,400,container.clientWidth,container.clientHeight);// 按下时的事件监听container.addEventListener('touchstart',function(e){scroller.doTouchStart(e.touches||[e],e.timeStamp);});// 移动时的事件监听container.addEventListener('touchmove',function(e){scroller.doTouchMove(e.touches||[e],e.timeStamp,e.scale);});// 抬起时的事件监听container.addEventListener('touchend',function(e){scroller.doTouchEnd(e.timeStamp);});// 移出屏幕／取消的事件监听container.addEventListener('touchcancel',function(e){scroller.doTouchEnd(e.timeStamp);});

依赖

• Tiny.js: Link

API文档

http://tinyjs.net/plugins/tinyjs-plugin-scroller.html#docs

感谢

quentinyang