Swiped.js移动应用滑动列表

联合创作 · 2023-09-25 23:43

Swiped.js 提供漂亮的移动应用可滑动列表样式,采用原生JS编写。




功能特性:



  • 免费,无依赖包


  • 对不同程度的滑动显示不同效果


  • 支持类似QQ的滑动删除


  • 便于使用


  • 支持CSS改变样式



安装


npm install swiped  
bower install swipe

使用


直接给HTML标签添加Class即可:


<div class="foo">
    elem1
</div>

多个滑动项 :


<ul class="bar">
    <li>
        elem3
    </li>
    <li>
        elem4
    </li>
    <li>
        elem5
    </li>
</ul>

收缩 :


<div class="foo"><span></span>element 16</div>

单个初始化 :


var s1 = Swiped.init({
    query: '.foo',
    right: 300});

多个初始化 :


var s2 = Swiped.init({
    query: '.bar li',
    list: true,
    left: 200,
    right: 200});

收缩功能初始化 :


var s3 = Swiped.init({
    query: '.foo',
    left: 400
});

document.querySelector('.foo span').addEventListener('touchstart', function() {
    s3.toggle();
});

实现滑动删除


Swiped.init({
    query: '.baz',
    right: 400,
    onOpen: function() {
        this.destroy(true)
    }
});
浏览 26
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报