var toast = new auiToast();

var skin = new auiSkin({ name:”night”, //皮肤样式名字,不能为中文
skinPath:’../../css/aui-skin-night.css’, //皮肤样式表路径
default:false,//是否默认立即使用 beginTime:”20:00″,//开始时间
endTime:”07:00″//结束时间})

参数说明:

轮播组件

最后一章节主要分享下AUI2.0页面的常用组件,组件在我们项目交互中用得很多,所以这个必须要掌握的。

JS组件-aui-dialog

自定义图标:toast.custom({ title:”成功给了一个赞”, html:”,
duration:2000});

popup.show 手动设置显示弹出层

input:false //是否有input输入框

数据解读,JS组件-aui-popup

左上角会员中心会话消息我的收藏varpopup=newauiPopup();

aui-pull-refresh.js 下拉刷新组件

scrollTop:””,//滚动高度

index:1,当前点击的位置,默认为1

vartab=newauiTab({element:document.getElementById,index:1,repeatClick:false},function;});

var popup = new auiPopup();

JS组件-aui-range

默认样式失败自定义弹出loading样式apiready=function;}vartoast=newauiToast();functionshowDefault{case"success":toast.success({title:"提交成功",duration:2000});break;case"fail":toast.fail({title:"提交失败",duration:2000});break;case"custom":toast.custom({title:"提交成功",html:'',duration:2000});break;case"loading":toast.loading({title:"加载中",duration:2000},function;setTimeout{toast.hide;break;default://statements_defbreak;}}

失败类:toast.fail({ title:”提交失败”, duration:2000});

skin.removeSkin(); //手动设置取消当前主题

JS组件-aui-toast

isToBottom:true//是否到达底部,true,false

aui-range.js滑块类插件

aui-toast.js为弹出提示类的组件

OK,我们可以看下效果,猛戳连接:轮播DEMO

加载中:toast.loading({ title:”加载中”, duration:2000},function{
console.log; setTimeout{ toast.hide;

element:,容器

toast.success({ title:”提交成功”, duration:2000});

JS组件-aui-pull-refresh

88首页设置地图日历日期购物车AUISlide轮播组件不只局限于放置图片,可以自定义内容,分页样式有圆点,结合AUIFlex来实现图片及内容的水平、垂直居中AUISlide提供了常用的配置属性,可以自定义宽度,高度,自动播放,分页器样式等,支持无缝循环轮播AUISlide会让你更方便让你布局轮播效果AUISlide更好的支持循环滑动切换AUISlide会让你更方便让你布局轮播效果AUISlide更好的支持循环滑动切换varslide=newauiSlide({container:document.getElementById("aui-slide"),//"width":300,"height":260,"speed":300,"pageShow":true,"pageStyle":'dot',"loop":true,'dotPosition':'center',currentPage:currentFun})functioncurrentFun{console.log;}varslide2=newauiSlide({container:document.getElementById("aui-slide2"),//"width":300,"height":240,"speed":300,"autoPlay":0,//自动播放"pageShow":true,"loop":true,"pageStyle":'dot','dotPosition':'center'})varslide3=newauiSlide({container:document.getElementById("aui-slide3"),//"width":300,"height":240,"speed":500,"autoPlay":3000,//自动播放"loop":true,"pageShow":true,"pageStyle":'line','dotPosition':'center'})console.log;

buttonIndex:1,//当前点击按钮

text:””//输入的内容

aui-popup.js 为弹出菜单组件

参数说明:

JS组件-aui-tab

参考《JS组件-aui-skin》来使用。aui-skin.js为控制皮肤主题样式显示的插件。

数据解读组件 – 跨平台移动前端框架AUI 2.0-Web前端之家。msg:”消息内容”,//内容文字

使用方法:

var dialog = new auiDialog();

返回参数:

var range = new auiRange({ element:document.getElementById
//滑块容器},function{ console.log

skin.setSkin(); //手动设置立即使用主题

aui-scroll.js为监听滚动条的插件,可以实时监听返回滚动高度和判断是否到达底部

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})

aui-dialog.js为对话框组件,可以实现弹出对话框效果

var pullRefresh = new auiPullToRefresh({ container:
document.querySelector(‘.aui-refresh-content’), //下拉容器
triggerDistance: 100 //下拉高度},function{ if(ret.status==”success”){
pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏 },1500) }})

总结

到这里,跨平台移动前端框架AUI
2.0的内容都分享完了,希望能拓展大家的知识面。

dialog.alert({ title:”弹出提示”, msg:’这里是内容’,
buttons:[‘取消’,’确定’]},function{ console.log

index:1,默认选中

我自己试过,要比现在流行的swipe轻巧很多,可以看下代码和效果:

自定义皮肤

dom:el 当前点击的dom对象

上一篇主要是大概介绍到了AUI2.0的页面基本交互。回顾下上一篇:
页面基本交互- 跨平台移动前端框架AUI 2.0

title:”弹出提示”,//标题

repeatClick:false //是否允许重复点击,

自定义主题皮肤是2.0中的一个亮点,在2.0中我们抛弃了一些组件的多种色调并分离了皮肤样式,结合aui-skin.js可以实现APP主题的切换功能。

这个在上面已经提到过了,效果可以参考前面的文章。

给按钮增加 aui-popup-for=”top”属性,属性值对应弹出菜单容器ID,

aui-tab.js为切换类的组件

buttons:[‘取消’,’确定’],

var scroll = new auiScroll({ listen:true,
//是否监听滚动高度,开启后将实时返回滚动高度 distance:200
//判断到达底部的距离,isToBottom为true},function{ console.log;

总的来说,这些组件用起来比较方便,目前我用到了轮播组件,比较轻巧,虽然这个框架涉及到的内容比较多,不一定都会用到,但是我们可以抽取其中一些好的,应用到我们的项目当中。

JS组件-aui-scroll

当default为true时,beginTime和endTime参数无效。使用beginTime和endTime,可以控制自定义皮肤使用时间,请注意时间格式的正确性

相关文章

网站地图xml地图