JS实用控件——可滑动列表项

有时候我们在一个list中要为列表项添加左右滑动的效果，通过滑动出来的按钮实现一些点击事件，这时候就可以用到本文所介绍的插件了。

照例，先上效果图：

                                                                                  插件效果图

我觉得这个效果还是挺高频且实用的，奈何weui里面没有这个扩展，只能自己在网上搜索并改进了。为了方便使用，我已经把左右滑动效果封装成了一个jquery插件了，读者也可以根据需要修改其代码做更多的扩展。

1、列表项html
先贴一下列表项的html代码：

<a href="#" class="weui-media-box weui-media-box_appmsg swipte_item">
    <div class="weui-media-box__hd">
        <img class="weui-media-box__thumb" src="thumbnail.png">
    </div>
    <div class="weui-media-box__bd">
        <h4 class="weui-media-box__title"></h4>
        <p class="weui-media-box__desc"></p>
    </div>
    <li class="weui-swiped-btn weui-swiped-btn_warn swipe_btn">拒接</li>
    <li class="weui-swiped-btn accept_btn">接单</li>
</a>

其中，两个li标签的class属性可以自定义，后续生成滑动实例要用到，还有，我用的是weui，写出来是如上的效果，读者最好根据需求自行制作控件。

2、列表项css
随后是css代码：

.weui-swiped-btn.weui-swiped-btn_warn.swipe_btn {
    color: white;
    position: absolute;
    right: -67px;
    width: 35px;
    text-align: center;
    height: 70px;
    line-height: 70px;
}

.weui-swiped-btn.accept_btn {
    color: white;
    background: #1AAD19;
    position: absolute;
    left: -67px;
    width: 35px;
    text-align: center;
    height: 70px;
    line-height: 70px;
}

读者根据自己的需求修改就好了，这里面有个问题，就是left、right的偏移和width不一样，我暂时没找出问题根源，只能在插件里通过增加