aui

简介

aui 是一套基于原生javascript开发的移动端UI框架。包含常用js API(如：字符校验、本地定时存储、数组对象处理、ajax原生封装、设备信息获取、手势事件…)；插件(如：loading加载、dialog模态框、toast消息提示、picker多级联动…)；UI组件(如：button按钮、tag标签、card卡片…)；常用模板(如：侧滑菜单、加入购物车动画、星级评价、图片上传预览裁剪、选项卡…)。

特点

1、标准化，产品化
2、更多复用，更快效率
3、多人协作，更加统一
4、维护方便
5、易于使用
6、减少UI设计时间

引用

<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.min.css"/>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.min.js"></script>

演示

查看演示：https://aui-js.github.io/aui/index.html

文档

看云在线文档地址：https://www.kancloud.cn/chen-wanchun/aui-js

代码

Github仓库地址：https://github.com/aui-js/aui

api

extend 对象合并(可实现多层对象深度合并)

参数 类型 描述 默认值 必选
opts Object 原始参数 无 是
opt Object 新参数 无 是
override Boolean 是否合并重置 无 否 
   aui.extend("原始参数", "新参数", true);

isDefine 判断字符串是否为空

参数 类型 描述 默认值 必选
str string 字符串 无 是 
   aui.isDefine(str);

space 删除字符串中指定字符

参数 类型 描述 默认值 必选
str string 字符串 无 是
flag Boolean 是否去除前后空格[false: 去除前后空格 \ true: 去除全部空格] 无 否 
   aui.space(str, true);

replaceStr 去除字符串中空格

参数 类型 描述 默认值 必选
str string 字符串 无 是
assignStr string 指定字符串 无 否 
   aui.replaceStr('原字符串', '指定字符');

uniq 数组去重

参数 类型 描述 默认值 必选
array array 去重数组 无 是 
   aui.uniq(array);

getUrlstr 截取URL中参数(可获取中文内容)

参数 类型 描述 默认值 必选
str string 参数名称 无 是 
   aui.getUrlstr('id');

random 生成随机数

参数 类型 描述 默认值 必选
Min number 最小值 无 是
Max number 最大值 无 是 
   aui.random(10, 100);

copy 复制到剪切板

参数 类型 描述 默认值 必选
str string 要复制的文本 无 是 
   aui.copy('213421');

checkIsDeveloper 验证是否是开发者

参数 类型 描述 默认值 必选
isDeveloper Boolean 是否是开发者 无 否 
   aui.checkIsDeveloper(false);

setLocal 本地存储(可设置存储时间)

参数 类型 描述 默认值 必选
key string 存储的名称 无 是
value string 存储的内容 无 是
time number 存储时间 无 否 
   aui.setLocal('items', items, 1*24*60*60);//获取缓存aui.getLocal('items');//移除缓存，一般情况不手动调用，缓存过期自动调用aui.removeLocal('items');//清空所有缓存aui.clearLocal();

import 引入 js / css 文件

参数 类型 描述 默认值 必选
url string / array 文件path 无 是 
   aui.import('aui.js')aui.import(['aui.js', 'aui.css'])

组件

loading加载动画

预览

参数 类型 描述 默认值 必选
warp string 父容器元素 ‘body’ 否
type number 1: 常用风格; 2: 点击按钮后在按钮内显示加载动画; 3: 四个方块旋转; 4: 圆点放大缩小动画(全屏首次加载过度动画); 5: 圆点背景过度动画-微信小程序效果(全屏首次加载过度动画) 1 否
msg string 提示内容 ‘’ 否
mask boolean 是否显示遮罩蒙版 true 否
direction string 横向(“row”)或纵向(“col”)控制 ‘col’ 否
theme number type=3时，控制全屏或小窗展示（1：小窗; 2：全屏） 1 否
style object { bg: ‘背景’, color: ‘文字颜色’, maskBg: ‘遮罩层颜色’, zIndex: ‘层级’} ‘’ 否

显示loading加载：

aui.showload({msg: "加载中"
});

隐藏loading加载：

aui.hideload();

toast消息提示弹窗

预览

参数 类型 描述 默认值 必选
warp string 父容器元素 ‘body’ 否
msg string 提示内容 ‘’ 是
icon string 图标 ‘’ 否
direction string 横向(“row”)或纵向(“col”)控制 ‘col’ 否
location string （icon参数未配置时可配置）位置 bottom:位于底部，从底部弹出显示middle:位于页面中心位置 ‘bottom’ 否
duration number 显示时间 2000 否

示例：

aui.toast({icon: "../../img/success.png",msg: "支付成功！",direction: "col"
},function(ret){});

dialog提示窗

预览

参数 类型 描述 默认值 必选
warp string 父容器元素 ‘body’ 否
title string 标题 ‘’ 否
msg string 提示内容 ‘’ 是
btns arr 按钮，默认按钮为“确定” 分别可设置btns值为1：[‘按钮1’, ‘按钮2’]2：[{name: ‘按钮1’, color: ‘’},{name: ‘按钮2’, color: ‘’}] [“确定”] 否
mask boolean 是否显示遮罩蒙版 true 否
touchClose boolean 触摸遮罩是否关闭模态弹窗 true 否
theme number 主题样式，控制模态弹窗按钮显示风格(1: 大按钮; 2: 小按钮-居右分布; 3: 按钮宽度等于父级宽度100%，适用于按钮文字过多情况) ‘col’ 否
items arr prompt–input框列表配置[{label: ‘姓名：’, type: ‘text’, value: ‘(可选)’, placeholder: ‘请输入姓名’}] [] 否
duration number 显示时间 2000 否
style object { w: ‘’, //–可选参数，模态窗宽度，默认80% h: ‘’, //–可选参数，模态窗高度，默认"auto"自适应 bg: ‘’,//–可选参数，模态窗背景色，默认白色 zIndex: ‘’, //–可选参数，模态窗层级 title: { bg: “”, color: “”, lineHeight: “”, textAlign: “”, fontSize: “”, padding: “”}} ‘’ 否

1、alert单按钮提醒弹窗

aui.alert({title: "提示", //可选msg: "您点击了alert单按钮模态弹窗！",mask: true,touchClose: true, //可选btns: ["确定"], //可选//或btns: [{name: '按钮1', color: '#f00'},{name: '按钮2', color: '#00f'}], //可选theme: 1, //可选style: { //可选w: "75%",h: "auto",bg: '#FFF',zIndex: 999,animate: "aui-scale-in-tosmall-dialog",title: {bg: "#FFF",color: "#333",lineHeight:"55px",fontSize: "17px",textAlign: "center",padding: "0px"}}
},function(ret){console.log(ret.index);if(ret.index == 0){aui.toast({msg: "您点击了确定"});}
});

2、confirm双按钮提醒弹窗

aui.confirm({msg: "您点击了confirm双按钮模态弹窗！",btns: ["取消", "确定"],
},function(ret){console.log(ret.index); if(ret.index == 1){aui.toast({msg: "您点击了确定"});}
});

3、delete删除提醒弹窗

aui.delete({msg: "您点击了delete删除模态弹窗！",btns: ["取消", "删除"],
},function(ret){console.log(ret.index); if(ret.index == 1){aui.toast({msg: "您点击了删除"});}
});

4、prompt输入弹窗

aui.prompt({items: [{label: '姓名：', type: 'text', value: '', placeholder: '请输入姓名'},{label: '年龄：', type: 'number', value: '', placeholder: '请输入年龄'}],btns: ["取消", "确定"],
},function(ret){console.log(ret.data);  if(ret.index == 1){aui.alert({title: "输入结果：",msg: "<div style='text-align: left;'>姓名：" + ret.data[0] + "</br>年龄：" + ret.data[1]+"</div>",btns: ["确定"],}, function(ret){if(ret.index == 0){aui.toast({msg: "您点击了确定"});}});}
});

5、confirm带图标双按钮提醒弹窗

aui.confirm({msg: "<div style='text-align: center;'>"+"<img src='../../img/success-green.png' style='width: 60px; margin: 0 auto;'>"+"<p style='width: 100%; line-height: 25px; color: 15px;'>带图标模态弹窗</p>"+"</div>",btns: ["取消", "确定"],
},function(ret){console.log(ret.index); if(ret.index == 1){aui.toast({msg: "您点击了确定"});}
});

6、多按钮弹窗

aui.confirm({msg: "您点击了多按钮弹窗！",btns: [{name: '残忍拒绝', color: ''},{name: '再逛逛', color: ''}, {name: "返回首页", color: "#909090"}], //可选theme: 3, //可选
},function(ret){console.log(ret.index); if(ret.index == 0){aui.toast({msg: "您点击了残忍拒绝"});}else if(ret.index == 1){aui.toast({msg: "您点击了再逛逛"});}else if(ret.index == 2){aui.toast({msg: "您点击了返回首页"});}
});

actionsheet操作表

预览

参数 类型 描述 默认值 必选
warp string 父容器元素 ‘body’ 否
items arr 菜单列表[{name: “”, color: “”, fontSize: “”, textAlign: “”}] [] 否
mask boolean 是否显示遮罩蒙版 true 否
touchClose boolean 触摸遮罩是否关闭模态弹窗 true 否
cancle string 取消按钮 ‘’ 否
location string 位置 bottom:位于底部，从底部弹出显示middle:位于页面中心位置 ‘bottom’ 否
theme number 主题样式(1: 非全屏宽度； 2: 全屏宽度) 1 否

示例:

aui.actionSheet({title: '上传图片',mask: true,touchClose: true,items: [{name: "从相册选择",},{name: "拍照"}],cancle: "取消",theme: 1,location: "bottom"
},function(ret){console.log(ret.index);
});

actionmenu分享弹窗

预览

参数 类型 描述 默认值 必选
warp string 父容器元素 ‘body’ 否
items arr 菜单列表[{name: “”, icon: “”, iconColor: “”, img: “”}] [] 否
mask boolean 是否显示遮罩蒙版 true 否
touchClose boolean 触摸遮罩是否关闭模态弹窗 true 否
cancle string 取消按钮 ‘’ 否
location string 位置 bottom:位于底部，从底部弹出显示middle:位于页面中心位置 ‘bottom’ 否
theme number 主题样式(1: 非全屏宽度； 2: 全屏宽度) 1 否 
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.actionmenu.css"/>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.min.js"></script>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.actionmenu.js"></script>

示例：

aui.actionMenu({title: '分享至',mask: true,touchClose: true,items: [{name: "微信", img: "../../img/weixin.png"},{name: "朋友圈", img: "../../img/pengyouquan.png"},{name: "QQ", img: "../../img/QQ.png"},{name: "微博", img: "../../img/weibo.png"}],cancle: "取消",theme: 1,location: "bottom"
},function(ret){console.log(ret.index);
});

popover菜单

预览

参数 类型 描述 默认值 必选
warp string 父容器元素 ‘body’ 否
items arr 菜单列表[{name: “”, color: “”, icon: “iconfont icongfont-right”, iconColor: ‘’, img: “”, fontSize: “”, textAlign: “”}] [] 否
mask boolean 是否显示遮罩蒙版 false 否
touchClose boolean 触摸遮罩是否关闭模态弹窗 true 否
location string 位置 top: 设置弹窗显示到触发元素“上”方; bottom: 设置弹窗显示到触发元素“下”方; ‘top’ 否 
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.popover.css"/>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.min.js"></script>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.popover.js"></script>

示例：

aui.popover.open({warp: '.aui-header-right',items: [{name: '微信', img: '../../img/weixin.png'},{name: '朋友圈', img: '../../img/pengyouquan.png'},{name: 'QQ', img: '../../img/QQ.png'},{name: '微博', img: '../../img/weibo.png'}],mask: true,location: 'bottom'
},function(ret){console.log(ret);aui.toast({msg: ret.el.querySelector("span").innerHTML});
})

picker多级联动

预览

参数 类型 描述 默认值 必选
warp string 父容器元素 ‘body’ 否
title string 标题 ‘’ 否
layer number 控制几级联动 1 否
data arr 数据 如：[{text: ‘’, adcode: ‘’, children: [{text: ‘’, adcode: ‘’}]}] [] 否 
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.picker.css"/>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.min.js"></script>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.picker.js"></script>

示例：

aui.picker.open({title: '选择区域',layer: 3,data: cityData, //城市数据select: function(ret){console.log(ret);}
},function(ret){console.log(ret);if(ret.status == 1){aui.picker.close(function(){aui.alert({msg: ret.data.text + " " + ret.data.children.text + ' ' + ret.data.children.children.text});                      });                     }
})

poster广告弹窗

预览

参数 类型 描述 默认值 必选
warp string 父容器元素 ‘body’ 否
mask boolean 是否显示遮罩蒙版 true 否
touchClose boolean 触摸遮罩是否关闭模态弹窗 true 否
image string 广告图片地址 ‘’ 是 
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.poster.css"/>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.min.js"></script>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.poster.js"></script>

示例：

aui.poster({image: 'https://xbjz1.oss-cn-beijing.aliyuncs.com/upload/default/share.png'
});

sidemenu侧滑菜单

预览

参数 类型 描述 默认值 必选
warp string 父容器元素 ‘body’ 否
content string 侧滑菜单元素 ‘’ 是
moves arr 跟随拖动元素；[header——页面头部, .content——页面内容部分] (moveType设置为"all-move" 或 "menu-move"时，此参数必须配置 [] 是
moveType string [‘main-move’: ‘主页面移动，侧滑菜单固定’] [‘menu-move’: ‘侧滑菜单移动，主页面固定’] [‘all-move’: ‘主页面+侧滑菜单都移动’] ‘main-move’ 否
position string 侧滑菜单初始化位置，默认位于页面左侧 [left: ‘左侧’, right: ‘右侧’] ‘left’ 否
mask boolean 是否显示遮罩蒙版 true 否
maskTapClose boolean 触摸遮罩是否关闭侧滑菜单 true 否
speed number 打开、关闭页面速度[值越大，速度越快] 10 否
drag object { use: true, //–可选参数，是否开启拖动打开、关闭菜单[true: 开启 , false: 关闭] start: null, //–可选参数，开始拖动回调 move: null, //–可选参数，拖动中回调 end: null, //–可选参数，拖动结束} {} 否
style object 设置样式 {w: ‘80vw’, h: ‘100vh’, bg: ‘#333’} 否 
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.sidemenu.css"/>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.min.js"></script>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.sidemenu.js"></script>

初始化：

aui.sidemenu.init({warp: '.aui-container',content: '#aui-sidemenu-wapper',position: 'left',moveType: 'main-move',moves: ['.aui-container'],mask: true,maskTapClose: true,drag: {use: true,//start: _this.dragcallback,//move: _this.dragcallback,end: function(ret){console.log(ret)}},style: {w: '70vw',h: '100vh',bg: '#333'},
}).then(function(ret){console.log(ret)
});

设置配置数据：

aui.sidemenu.setData({moveType: 'all-move',
}).then(function(ret){//console.log(ret)
});

打开侧滑菜单：

aui.sidemenu.open({moveType: 'main-move',speed: 10,
}).then(function(ret){console.log(ret)
});

关闭侧滑菜单：

aui.sidemenu.close({speed: 10}).then(function(ret){console.log(ret)
});

selectmenu下拉列表选择菜单

预览

参数 类型 描述 默认值 必选
warp string 父容器元素 ‘body’ 否
data arr 菜单列表[{value: ‘’, text: ‘’}] [] 是
layer number 控制组件为几级 1 是
mask boolean 是否显示遮罩蒙版 true 否
touchClose boolean 触摸遮罩是否关闭侧滑菜单 true 否
checkedMore boolean 是否多选(多选限制最后一级可多选) false 否
before function 打开弹窗前执行 null 否
select function 一级以上点击选择后执行，获取下级数据并return null 否
style object 样式 {width: ‘’, height: ‘’, top: ‘’, left: ‘’, padding: ‘’, background: ‘’, borderRadius: ‘’, itemStyle:{textAlign: ‘’,fontSize: ‘’,color: ‘’,isLine: false, //是否显示分割线}} 否 
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.selectmenu.css"/>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.min.js"></script>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.selectmenu.js"></script>

打开：

aui.selectMenu.open({warp: '.orderby-items',layer: layer, // 1,2,3...data: [{value: '0', text: '昨天'},{value: '1', text: '本周'},{value: '2', text: '上周'},{value: '3', text: '本月'},{value: '4', text: '上月'},],checkedMore: true,select: function(ret){ //点击时获取下级数据//console.log(ret); //{value: '0', text: '昨天'}if(ret.pindex == 0){//ajax  -- 参数如ret.valuevar data = [{value: '1', text: '1点'},{value: '2', text: '2点'},{value: '3', text: '3点'},{value: '4', text: '4点'},{value: '4', text: '5点'},{value: '4', text: '6点'},{value: '4', text: '7点'},{value: '4', text: '8点'},{value: '4', text: '9点'},{value: '4', text: '10点'},{value: '4', text: '11点'},{value: '4', text: '12点'},];}else if(ret.pindex == 1){var data = [{value: '0', text: '10分'},{value: '1', text: '20分'},{value: '2', text: '30分'},{value: '3', text: '40分'},{value: '4', text: '50分'},{value: '4', text: '60分'},];}return data                        },
}, function(ret){isShowModal = false;for(var i = 0; i < is.parentNode.querySelectorAll('.orderby-item').length; i++){is.parentNode.querySelectorAll('.orderby-item')[i].classList.remove('active');                }
});

关闭

aui.selectMenu.close(function(){if(ret && ret.status == 0){console.log(ret);if(ret.data.length > 0){is.classList.add("selected");is.querySelector("span").innerText = '';for(var i = 0; i < ret.data[ret.data.length-1].length; i++){if(i != ret.data[ret.data.length-1].length - 1){is.querySelector("span").innerText += ret.data[ret.data.length - 1][i].text + ',';                                                                                                }else{is.querySelector("span").innerText += ret.data[ret.data.length - 1][i].text}}}else{is.classList.remove("selected");is.querySelector("span").innerText = '三级列表';}}
});

keypad数字键盘

预览

参数 类型 描述 默认值 必选
warp string 父容器元素 ‘body’ 否
type string 类型: “number”—纯数字键盘 “point”—带小数点键盘 “idcard”—输入身份证号键盘 ‘number’ 否
value string 键盘输入值 ‘’ 否
num number 控制小数点后保留两位 2 否
mask boolean 是否显示遮罩蒙版 true 否
touchClose boolean 触摸遮罩是否关闭侧滑菜单 true 否 
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.keypad.css"/>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.min.js"></script>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.keypad.js"></script>

示例：

aui.keypad.open({type: 'number', //1、number | 2、point | 3、idcardmask: false,value: document.querySelector('#text1').value
}, function(ret){console.log(ret);document.querySelector('#text1').value = ret.result;
});

chatbox js聊天输入框

预览

参数 类型 描述 默认值 必选
warp string 父容器元素 ‘body’ 否
mask boolean 是否显示遮罩蒙版 true 否
touchClose boolean 触摸遮罩是否关闭侧滑菜单 true 否
autoFocus boolean 是否自动获取焦点 false 否
events arr 配置监听事件(录音，选择附加功能…等事件监听) [] 否
record object 录音功能配置 record: { use: true, //是否开启录音功能 MIN_SOUND_TIME: 800 //录音最短时间限制 } 否
emotion object 表情功能配置 emotion: { use: true, //是否开启表情功能 path: ‘’ //.json文件路径 pageHasNum: 27, //一页显示按钮数量(7 * 4 - 1) } 否
extras object 附加功能配置 extras: { use: true, //是否开启附加功能 pageHasNum: 8, //一页显示按钮数量(4 * 2) btns: [ /* {title: ‘’, icon: ‘’, img: ‘’} */], } 
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://aui-js.github.io/aui/static/css/aui.chatbox.css"/>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.min.js"></script>
<script type="text/javascript" src="https://aui-js.github.io/aui/static/js/aui.chatbox.js"></script>

示例：

aui.chatbox.init({warp: 'body',autoFocus: true,record: {use: true,},emotion: {use: true,path: '../../img/chat/emotion/',file: 'emotion.json'},extras: {use: true,btns: [{title: '相册', icon: 'iconimage'},{title: '拍摄', icon: 'iconcamera_fill'},{title: '语音通话', icon: 'iconvideo_fill'},{title: '位置', icon: 'iconaddress1'},{title: '红包', icon: 'iconredpacket_fill'},{title: '语音输入', icon: 'icontranslation_fill'},{title: '我的收藏', icon: 'iconcollection_fill'},{title: '名片', icon: 'iconcreatetask_fill'},{title: '文件', icon: 'iconmail_fill'}                       ],},                events: ['recordStart', 'recordCancel', 'recordEnd', 'chooseExtrasItem', 'submit'],
}, function(){})
//开始录音
aui.chatbox.addEventListener({name: 'recordStart'}, function(ret){console.log(ret);//aui.toast({msg: ret.msg})
});
//取消录音
aui.chatbox.addEventListener({name: 'recordCancel'}, function(ret){console.log(ret);//aui.toast({msg: ret.msg})
});
//结束录音
aui.chatbox.addEventListener({name: 'recordEnd'}, function(ret){console.log(ret);aui.toast({msg: ret.msg})
});
//选择附加功能
aui.chatbox.addEventListener({name: 'chooseExtrasItem'}, function(ret){console.log(ret);aui.toast({msg: ret.data.title});
});
//发送
aui.chatbox.addEventListener({name: 'submit'}, function(ret){console.log(ret);aui.toast({msg: ret.data.value})
});

aui移动端UI框架相关推荐

  1. 移动端UI框架小汇总

    前言:随着前端技术的更新,Vue,React,Angular等JS类框架不断的深入使用,各种WebApp.混合App.微信H5等应用的发展,各种配套的前端UI框架应运而生.最近,通过在Github.前 ...

  2. Touch UI：高质量的移动端UI框架介绍

    Hi,我们做了一款高质量的.免费的移动端UI框架. 经过将两年多开发和项目实践,我们终于把Touch UI开放出来了.这是一套基于vue.js打造的移动端UI框架,包含近百种组件,几乎囊括了开发移动应 ...

  3. vue3使用的移动端UI框架,vue一般用什么ui框架

    用vue 一般都配合什么 UI 框架 vue只是一个js库,不算框架,他不限制你使用使用UI框架,理论上你可以使用任意UI框架. 常见的vue的UI框架有:elementUI(饿了么的UI框架),Vu ...

  4. 基于vue移动端UI框架

    1.vux 基于WeUI和Vue(2.x)开发的移动端UI组件库 基于webpack+vue-loader+vux可以快速开发移动端页面,配合vux-loader方便你在WeUI的基础上定制需要的样式 ...

  5. vue 移动端ui框架

    vue移动端ui框架合集 转载于:https://www.cnblogs.com/knuzy/p/9508042.html

  6. Vue移动端UI框架mux-ui

    移动端UI框架mux-ui 移动端UI框架mux-ui 安装 组件 Actionsheet组件 按钮Button组件 头像Avatar组件 Cell组件 Card组件 Alert组件 Confirm组 ...

  7. python 移动ui框架_Touch UI：基于vue的移动端UI框架

    Hi,我们做了一款高质量的.免费的移动端UI框架. 经过将两年多开发和项目实践,我们终于把Touch UI开放出来了.这是一套基于vue.js打造的移动端UI框架,包含近百种组件,几乎囊括了开发移动应 ...

  8. 微信公众号 几种移动端UI框架介绍

    微信公众号 几种移动端UI框架介绍 微信公众号开发,主要是移动端网页的页面开发,在这里推荐3个移动端UI框架:WeUI.SUI和Mint UI. 1. WeUI 1.1 WeUI WeUI是微信官方设 ...

  9. vue3使用的移动端UI框架,vue移动端ui框架哪个好

    号称目前最火的前端框架Vue,它有什么显著特点呢? 1.Vue是什么是目前最火的一个前端框架,除了可以开发网站,还可以开发手机App.是前端的主流框架之一,和.一起,并成为前端三大主流框架. 是一套构 ...

最新文章

  1. Zencart获取PayPal PDT Token参数教程方法
  2. ASP.NET MVC3书店--第九节 注册与下订单(第一部分）（转）
  3. ylbtech-LanguageSamples-UserConversions(用户定义的转换)
  4. shell在一个大文件找出想要的一段字符串操作技巧
  5. Visual Paradigm中文乱码
  6. c语言定义92bit位变量,Keil C51对C语言的关键词扩展之四： bit
  7. 2021-08-12
  8. 果园机器人作文开头_【360教育】写作技巧丨写作技巧小学高年级作文最全技巧100条，建议收藏！...
  9. 2022年电工杯B题参赛历程
  10. 《程序员代码面试指南》it名企算法与数据结构题目最优解（第二版）刷题笔记11
  11. SW-1、SW-2 通过 VSF 技术形成一台虚拟的逻辑设备
  12. CTFshow 愚人节欢乐赛 部分WP
  13. Grunt 的简单使用
  14. ubuntu串口调试工具kermit和minicom
  15. 2022金三银四面试总结-Java高级篇
  16. python等额本息和等额本金_用Python解读房贷利率，要不要看随你
  17. iOS-Runtime
  18. React使用className多类名设置
  19. MappedByteBuffer释放内存
  20. 投资的不少企业濒临破产，软银面临巨额债务危机

热门文章

  1. html 链接长宽,CSS实现长宽比的几种方案【转载】
  2. Win10专业版错误代码0xc0000225在吗修复?
  3. 微信小程序实现多页面
  4. 点击微信内网页a标签直接跳转打开淘宝APP的方法实例
  5. 阿里云短信服务Java实现
  6. Vue 中英文 组件 样式 写法
  7. 五分钟内用Python实现GitHook
  8. 什么是MTTF、MTBF、MTRF
  9. 微信小程序时间格式在IOS苹果手机上不识别
  10. SSD算法详解 及其 keras实现 （下）