xsm-scroll-list v0.1.1

xsm-scroll-list

列表滚动显示组件。

依赖

• jQuery

示例

直接引入脚本使用

<style>
.list-box {
    position: relative;
    height: 300px;
    overflow: hidden;
}
</style>

<div class="container">
    <div class="list-box">
        <ul></ul>
    </div>
</div>

<script src="jquery.min.js"></script>
<script src="xsm-scroll-list.js"></script>
<script>
$(function () {
    var scrollList = new XSMScrollList('.container', {
        items: [
            {name: '张三', age: 18},
            {name: '李四', age: 20},
            {name: '小明', age: 24},
            {name: '小张', age: 25},
            {name: '小王', age: 30},
            {name: '小李', age: 21},
            {name: '小刘', age: 19}
        ],
        fns: {
            renderItem: function (item, i) {
                return (
                '<li>' +
                    '<span class="index">' + (i + 1) + '</span>' + ' - ' +
                    '<span class="user-name">' + item.name + '</span>' + ' - ' +
                    '<span class="user-age">' + item.age + '</span>' +
                '</li>'
                )
            }
        }
    })
    scrollList.start()
})
</script>

通过 NPM 安装使用

npm intall xsm-scroll-list --save-dev

var $ = require('jquery')
var XSMScrollList = require('xsm-scroll-list')($)

// ...

API

XSMScrollList(container, options)

参数 container，容器元素或选择器。

参数 options，可选，支持的选项及缺省值:

• pauseOnMouseenter: true,
• items: null,
• listSelector: 'ul',
• stepPx: 2,
• stepMs: 80,
• fns: { /* renderItem: function (item, index) { return '...' } */ }

注意：renderItem() 在渲染列表前必须提供！

XSMScrollList.prototype

原型方法：

• start()
• stop()
• prependItem(item)
• prependItems(items)
• appendItem(item)
• appendItems(items)
• resetItems([items])