列表左滑删除
提示
这个Demo在源码模板文件里存在，但是原作者在文档中未列出。原因未知，可能是由于效果或者兼容性不好。使用时需注意！！！
源码不支持PC，本篇为了示例修改了源码适配PC。PC端滑动效果不是很顺畅，将就能用。手机端效果还行，可点击右侧二维码在手机端查看效果。
使用自定义主题样式需要先载入JS文件：
<script src="/static/auicss/script/aui-list-swipe.js"></script>
警告⚠️
aui-list-swipe-backup.js 文件应该是备份文件，请勿使用。
使用之前需要先实例化对象 var swipe = new auiListSwipe(callback);，options参数如下：
function callback(res) {
res.status // 固定值true
res.dom // 点击列表项的DOM对象
}示例源码
<div class="aui-content-padded">
<p>AUI 2.1新增了主题皮肤样式，开发者可以通过修改相关属性来自定义主题样式，该演示为测试演示，修改效果并不完全。</p>
</div>
<div class="aui-content-padded">
<div class="aui-btn" tapmode onclick="setSkin()">设置主题</div>
<div class="aui-btn aui-btn-info" tapmode onclick="removeSkin()">移除主题</div>
</div>
<div class="aui-content aui-margin-b-15">
<ul class="aui-list">
<li class="aui-list-header">
简单的列表布局
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner">
Item1
</div>
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner">
Item2
</div>
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner">
<div class="aui-list-item-title">Item3</div>
</div>
</li>
</ul>
</div>
<div class="aui-content aui-margin-b-15">
<ul class="aui-list">
<li class="aui-list-header">
带有右侧箭头
</li>
<li class="aui-list-item aui-list-item-middle">
<div class="aui-list-item-inner aui-list-item-arrow">
Item1
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner aui-list-item-arrow">
Item2
</div>
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner aui-list-item-arrow">
Item3
</div>
</li>
</ul>
</div>
<div class="aui-content aui-margin-b-15">
<ul class="aui-list">
<li class="aui-list-header">
带有其他元素的列表
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner">
<div class="aui-list-item-title">text</div>
<div class="aui-list-item-right">信息</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner">
<div class="aui-list-item-title">label</div>
<div class="aui-list-item-right">
<div class="aui-label aui-label-info">标签</div>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner aui-list-item-arrow">
<div class="aui-list-item-title">dot</div>
<div class="aui-list-item-right">
<div class="aui-dot" style="position:relative;top:0; right:0"></div>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner aui-list-item-arrow">
<div class="aui-list-item-title">badge</div>
<div class="aui-list-item-right">
<div class="aui-badge" style="position:relative;top:0; left:0">88</div>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner aui-list-item-arrow">
<div class="aui-list-item-title">badge</div>
<div class="aui-list-item-right">
<div class="aui-badge" style="position:relative;top:0; left:0"></div>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner aui-list-item-arrow">
<div class="aui-list-item-title">progress</div>
<div class="aui-list-item-right">
<div class="aui-progress aui-progress aui-progress-xxs" style="width:5rem;">
<div class="aui-progress-bar" style="width: 60%;"></div>
</div>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner aui-list-item-arrow">
<div class="aui-list-item-title">range</div>
<div class="aui-list-item-right">
<div class="aui-range">
<input type="range" class="aui-range" value="30" max="100" min="1" step="1" id="range" />
</div>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner">
<div class="aui-list-item-title">switch</div>
<div class="aui-list-item-right">
<input type="checkbox" class="aui-switch" checked>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner">
<div class="aui-list-item-title">radio</div>
<div class="aui-list-item-right">
<input type="radio" class="aui-radio" checked>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner">
<div class="aui-list-item-title">checkbox</div>
<div class="aui-list-item-right">
<input type="checkbox" class="aui-checkbox" checked>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner">
<div class="aui-list-item-title">bar-btn</div>
<div class="aui-list-item-right">
<div class="aui-bar aui-bar-btn aui-bar-btn-sm" style="width:60%;float:right">
<div class="aui-bar-btn-item">
<i class="aui-iconfont aui-icon-minus"></i>
</div>
<div class="aui-bar-btn-item">
<input type="number" class="aui-input aui-text-center" value="1" >
</div>
<div class="aui-bar-btn-item">
<i class="aui-iconfont aui-icon-plus"></i>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="aui-content">
<ul class="aui-list">
<li class="aui-list-header">带有图标、底线缩进</li>
<li class="aui-list-item">
<div class="aui-list-item-label-icon">
<i class="aui-iconfont aui-icon-home"></i>
</div>
<div class="aui-list-item-inner">
这是一个列表项
</div>
</li>
<li class="aui-list-item">
<div class="aui-list-item-label-icon">
<i class="aui-iconfont aui-icon-edit"></i>
</div>
<div class="aui-list-item-inner">
这是一个列表项
</div>
</li>
<li class="aui-list-item">
<div class="aui-list-item-label-icon">
<i class="aui-iconfont aui-icon-camera"></i>
</div>
<div class="aui-list-item-inner">
这是一个列表项
</div>
</li>
</ul>
</div>
<script type="text/javascript" src="/static/auicss/script/aui-skin.js" ></script>
<script type="text/javascript">
var skin = new auiSkin({
name:"night",
skinPath:'/static/auicss/css/aui-skin-night.css',
default:false,
beginTime:"20:00",
endTime:"07:00"
})
function setSkin(){
skin.setSkin();
}
function removeSkin(){
skin.removeSkin();
}
</script>