最后一章节主要分享下AUI2.0页面的常用组件，组件在我们项目交互中用得很多，所以这个必须要掌握的。
上一篇主要是大概介绍到了AUI2.0的页面基本交互。回顾下上一篇： 页面基本交互- 跨平台移动前端框架AUI 2.0
轮播组件
我自己试过，要比现在流行的swipe轻巧很多，可以看下代码和效果：
<link rel="stylesheet" type="text/css" href="../../css/aui-slide.css" />
<div id="aui-slide">
<div class="aui-slide-wrap" >
<div class="aui-slide-node">
<div class="aui-grid">
<div class="aui-row">
<div class="aui-col-xs-4">
<div class="aui-badge">88</div>
<i class="aui-iconfont aui-icon-home"></i>
<div class="aui-grid-label">首页</div>
</div>
<div class="aui-col-xs-4">
<i class="aui-iconfont aui-icon-gear"></i>
<div class="aui-grid-label">设置</div>
</div>
<div class="aui-col-xs-4">
<i class="aui-iconfont aui-icon-map"></i>
<div class="aui-grid-label">地图</div>
</div>
<div class="aui-col-xs-4">
<i class="aui-iconfont aui-icon-calendar"></i>
<div class="aui-grid-label">日历</div>
</div>
<div class="aui-col-xs-4">
<div class="aui-badge"></div>
<i class="aui-iconfont aui-icon-date"></i>
<div class="aui-grid-label">日期</div>
</div>
<div class="aui-col-xs-4">
<div class="aui-dot"></div>
<i class="aui-iconfont aui-icon-cart"></i>
<div class="aui-grid-label">购物车</div>
</div>
</div>
</div>
</div>
<div class="aui-slide-node aui-slide-node-middle aui-slide-node-center">
<div class="aui-content-padded">
<span class="aui-text-danger">AUI Slide</span> 轮播组件不只局限于放置图片，可以自定义内容，分页样式有圆点(dot)，线条(line),结合AUI Flex来实现图片及内容的水平、垂直居中
</div>
</div>
<div class="aui-slide-node aui-bg-warning aui-slide-node-middle aui-slide-node-center">
<div class="aui-content-padded">
<span class="aui-text-danger">AUI Slide</span>提供了常用的配置属性，可以自定义宽度，高度，自动播放，分页器样式等，支持无缝循环轮播
</div>
</div>
<div class="aui-slide-node bg-dark">
<img src="../../image/l1.png" />
</div>
<div class="aui-slide-node bg-dark">
<img src="../../image/l2.png" />
</div>
<div class="aui-slide-node bg-dark">
<img src="../../image/l3.png" />
</div>
</div>
<div class="aui-slide-page-wrap"><!--分页容器--></div>
</div>
<div id="aui-slide2">
<div class="aui-slide-wrap" >
<div class="aui-slide-node aui-slide-node-middle aui-slide-node-center">
<div class="aui-content aui-padded-15">
<span class="aui-text-danger">AUI Slide</span>会让你更方便让你布局轮播效果
</div>
</div>
<div class="aui-slide-node aui-slide-node-middle aui-slide-node-center">
<div class="aui-content aui-padded-15">
<span class="aui-text-success">AUI Slide</span>更好的支持循环滑动切换
</div>
</div>
</div>
<div class="aui-slide-page-wrap"><!--分页容器--></div>
</div>
<div id="aui-slide2">
<div class="aui-slide-wrap" >
<div class="aui-slide-node aui-slide-node-middle aui-slide-node-center">
<div class="aui-content aui-padded-15">
<span class="aui-text-danger">AUI Slide</span>会让你更方便让你布局轮播效果
</div>
</div>
<div class="aui-slide-node aui-slide-node-middle aui-slide-node-center">
<div class="aui-content aui-padded-15">
<span class="aui-text-success">AUI Slide</span>更好的支持循环滑动切换
</div>
</div>
</div>
<div class="aui-slide-page-wrap"><!--分页容器--></div>
</div>
<div id="aui-slide3">
<div class="aui-slide-wrap" >
<div class="aui-slide-node bg-dark">
<img src="../../image/l1.png" />
</div>
<div class="aui-slide-node bg-dark">
<img src="../../image/l2.png" />
</div>
<div class="aui-slide-node bg-dark">
<img src="../../image/l3.png" />
</div>
</div>
<div class="aui-slide-page-wrap"><!--分页容器--></div>
</div>
<script type="text/javascript" src="../../script/aui-slide.js"></script>
<script type="text/javascript">
var slide = new auiSlide({
container:document.getElementById("aui-slide"),
// "width":300,
"height":260,
"speed":300,
"pageShow":true,
"pageStyle":'dot',
"loop":true,
'dotPosition':'center',
currentPage:currentFun
})
function currentFun(index) {
console.log(index);
}
var slide2 = new auiSlide({
container:document.getElementById("aui-slide2"),
// "width":300,
"height":240,
"speed":300,
"autoPlay": 0, //自动播放
"pageShow":true,
"loop":true,
"pageStyle":'dot',
'dotPosition':'center'
})
var slide3 = new auiSlide({
container:document.getElementById("aui-slide3"),
// "width":300,
"height":240,
"speed":500,
"autoPlay": 3000, //自动播放
"loop":true,
"pageShow":true,
"pageStyle":'line',
'dotPosition':'center'
})
console.log(slide3.pageCount());
</script>这里说明下具体参数：
var slide = new auiSlide({
container:document.getElementById("aui-slide3"), //容器
// "width":300, //宽度
"height":240, //高度
"speed":500, //速度
"autoPlay": 3000, //自动播放
"loop":true,//是否循环
"pageShow":true,//是否显示分页器
"pageStyle":'line', //分页器样式，分dot,line
'dotPosition':'center' //当分页器样式为dot时控制分页器位置，left,center,right
})
OK，我们可以看下效果，猛戳连接：轮播DEMO
自定义皮肤
自定义主题皮肤是2.0中的一个亮点，在2.0中我们抛弃了一些组件的多种色调并分离了皮肤样式，结合aui-skin.js可以实现APP主题的切换功能。
参考《JS组件-aui-skin》来使用。aui-skin.js为控制皮肤主题样式显示的插件。
参数说明：
var skin = new auiSkin({
name:"night", //皮肤样式名字，不能为中文
skinPath:'../../css/aui-skin-night.css', //皮肤样式表路径
default:false,//是否默认立即使用
beginTime:"20:00",//开始时间
endTime:"07:00"//结束时间
})
当default为true时，beginTime和endTime参数无效。使用beginTime和endTime，可以控制自定义皮肤使用时间，请注意时间格式的正确性
skin.setSkin(); //手动设置立即使用主题
skin.removeSkin(); //手动设置取消当前主题
JS组件-aui-dialog
aui-dialog.js为对话框组件，可以实现弹出对话框效果
参数说明：
title:"弹出提示",//标题
msg:"消息内容",//内容文字
buttons:['取消','确定'],
input:false //是否有input输入框
返回参数：
buttonIndex:1,//当前点击按钮
text:""//输入的内容
使用方法：
var dialog = new auiDialog();
dialog.alert({
title:"弹出提示",
msg:'这里是内容',
buttons:['取消','确定']
},function(ret){
console.log(ret)
})
JS组件-aui-popup
aui-popup.js 为弹出菜单组件
使用方法
给按钮增加 aui-popup-for="top"属性，属性值对应弹出菜单容器ID，
引入js文件并加载
var popup = new auiPopup();
popup.show(el) 手动设置显示弹出层
使用案例：
<div class="aui-btn aui-btn-primary" aui-popup-for="top-left">左上角</div> <div class="aui-popup aui-popup-top-left" id="top-left"> <div class="aui-popup-arrow"></div> <div class="aui-popup-content"> <ul class="aui-list aui-list-noborder"> <li class="aui-list-item"> <div class="aui-list-item-label-icon"> <i class="aui-iconfont aui-icon-my aui-text-warning"></i> </div> <div class="aui-list-item-inner aui-list-item-middle"> 会员中心 </div> </li> <li class="aui-list-item"> <div class="aui-list-item-label-icon"> <i class="aui-iconfont aui-icon-mail aui-text-info"></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-star aui-text-danger"></i> </div> <div class="aui-list-item-inner"> 我的收藏 </div> </li> </ul> </div> </div> <script type="text/javascript" src="../../script/2.0/aui-popup.js" ></script> <script type="text/javascript"> var popup = new auiPopup(); </script>
这个在上面已经提到过了，效果可以参考前面的文章。
JS组件-aui-toast
aui-toast.js为弹出提示类的组件
使用方法:
var toast = new auiToast();
成功类：
toast.success({
title:"提交成功",
duration:2000
});
失败类：
toast.fail({
title:"提交失败",
duration:2000
});
自定义图标：
toast.custom({
title:"成功给了一个赞",
html:'<i class="aui-iconfont aui-icon-laud"></i>',
duration:2000
});
加载中：
toast.loading({
title:"加载中",
duration:2000
},function(ret){
console.log(ret);
setTimeout(function(){
toast.hide();
}, 3000)
});
<div class="aui-btn aui-btn-block aui-btn-info" tapmode onclick="showDefault('success')">默认样式（toast）</div>
<div class="aui-btn aui-btn-block aui-btn-success" tapmode onclick="showDefault('fail')">失败（toast）</div>
<div class="aui-btn aui-btn-block aui-btn-success" tapmode onclick="showDefault('custom')">自定义</div>
<div class="aui-btn aui-btn-block aui-btn-warning" tapmode onclick="showDefault('loading')">弹出loading样式（toast）</div>
<script type="text/javascript" src="../../script/2.0/aui-toast.js" ></script>
<script type="text/javascript">
apiready = function(){
api.parseTapmode();
}
var toast = new auiToast();
function showDefault(type){
switch (type) {
case "success":
toast.success({
title:"提交成功",
duration:2000
});
break;
case "fail":
toast.fail({
title:"提交失败",
duration:2000
});
break;
case "custom":
toast.custom({
title:"提交成功",
html:'<i class="aui-iconfont aui-icon-laud"></i>',
duration:2000
});
break;
case "loading":
toast.loading({
title:"加载中",
duration:2000
},function(ret){
console.log(ret);
setTimeout(function(){
toast.hide();
}, 3000)
});
break;
default:
// statements_def
break;
}
}
</script>JS组件-aui-tab
aui-tab.js为切换类的组件
参数说明
{
element:,容器
index:1,默认选中
repeatClick:false //是否允许重复点击，（设置为true时可以实现数量增加的功能）
}
返回:
{
index:1,当前点击的位置,默认为1
dom:el 当前点击的dom对象
}
<script type="text/javascript" src="../../script/2.0/aui-tab.js" ></script>
<script type="text/javascript">
var tab = new auiTab({
element:document.getElementById("footer"),
index:1,
repeatClick:false
},function(ret){
console.log(ret);
});
</script>JS组件-aui-range
aui-range.js滑块类插件
var range = new auiRange({
element:document.getElementById("range") //滑块容器
},function(ret){
console.log(ret)
})
JS组件-aui-pull-refresh
aui-pull-refresh.js 下拉刷新组件
var pullRefresh = new auiPullToRefresh({
container: document.querySelector('.aui-refresh-content'), //下拉容器
triggerDistance: 100 //下拉高度
},function(ret){
if(ret.status=="success"){
pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
},1500)
}
})
JS组件-aui-scroll
aui-scroll.js为监听滚动条的插件，可以实时监听返回滚动高度和判断是否到达底部
var scroll = new auiScroll({
listen:true, //是否监听滚动高度，开启后将实时返回滚动高度
distance:200 //判断到达底部的距离，isToBottom为true
},function(ret){
console.log(ret)
});
返回值
{
scrollTop:"",//滚动高度
isToBottom:true//是否到达底部，true，false
}
总结
总的来说，这些组件用起来比较方便，目前我用到了轮播组件，比较轻巧，虽然这个框架涉及到的内容比较多，不一定都会用到，但是我们可以抽取其中一些好的，应用到我们的项目当中。
到这里，跨平台移动前端框架AUI 2.0的内容都分享完了，希望能拓展大家的知识面。
网友评论文明上网理性发言 已有1人参与
发表评论:
评论列表