有时候我们在一个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不一样,我暂时没找出问题根源,只能在插件里通过增加滑动偏移来抵消掉负偏移,