基础布局
一、头部
核心：mui-bar mui-bar-nav
标题
二、主体部分
核心：mui-content
三、tabbar
核心:mui-table-view
-
面板1
面板1子内容
切换bar-item
四、折叠面板
核心:
-
面板1
面板1子内容
代码激活:macc
五、button
核心:
mui-btn
代码激活:mbutton
六、轮播组件
1. 核心:
代码激活:mslider
2. 轮播圆点:
3. 自动轮播
mui.plusReady(function() {
//自动轮播图片 获得slider插件对象
var slider = mui('.mui-slider');
slider.slider({
interval: 2000 //自动轮播周期，若为0则不自动播放，默认为0；
})
//监听轮播图片轮播事件
document.querySelector('.mui-slider').addEventListener('slide',function (e) {
console.log("第"+e.detail.slideNumber+"张图片");
})
})
4. 切换到指定索引
function changeTo (index) {
var slider = mui('.mui-slider');
slider.slider().gotoItem(index);
}
七、input表单
1.核心
2.输入项快速删除:
3.激活代码: minput
八：list列表
1.核心
-
项目1
22
2.图文列表
3. 激活代码:mlist
九. picker选择器
注意：引入mui.picker.css、mui.poppicker.css、mui.dtpicker.css、mui.picker.min.js
1.核心:
var picker = new mui.PopPicker();
//修改上方按钮文字
var picker = new mui.PopPicker({
buttons: ['cancel', 'OK']
});
2.设置数据:支持数组
picker.setData([{
value: 'xigua',
text: '西瓜'
},
{
value: 'lz',
text: '荔枝'
}
]);
3.显示并且获取点击回调
picker.show(function(selectItem) {
console.log(selectItem.length);
console.log(selectItem[0].value);
console.log(selectItem[0].text);
})
4.设置默认值
picker.pickers[0].setSelectedIndex(2, 1000);
十.多级联动选择器
1.核心
//显示多级选择器
function showMorePicker() {
var picker = new mui.PopPicker({
layer: 2
});
picker.setData([{
value: '100000',
text: '北京市',
children: [{
value: '100001',
text: '东城区'
}]
},
{
value: '120000',
text: '天津市',
children: [{
value: '120101',
text: '和平区'
}, {
value: "120102",
text: "河东区"
}, {
value: "120104",
text: "南开区"
}]
},
]);
picker.pickers[0].setSelectedIndex(1);
picker.pickers[1].setSelectedIndex(1);
picker.show(function(e) {
console.log(e);
})
}
十一 设置日期选择器
1.核心
//显示日期选择器
function showPickerDate() {
//一定要加上../css/mui.dtpicker.css引用
// var dtPicker = new mui.DtPicker();
// dtPicker.show(function(selectItems) {
// console.log(selectItems.y); //{text: "2016",value: 2016}
// console.log(selectItems.m); //{text: "05",value: "05"}
// })
var dtPicker = new mui.DtPicker({
type: 'datetime',
beginYear: 2000,
endYear:2020 ,//设置结束日期
// labels: ['Year', 'Mon', 'Day', 'Hour', 'min'], //设置默认标签区域提示语，默认为年月日分十秒
// customData: {
// h: [{
// value: 'AM',
// text: 'AM'
// },
// {
// value: 'PM',
// text: 'PM'
// }
// ]
// } //时间/日期别名
});
//这里格式一定要是06-04
dtPicker.setSelectedValue("2018-06-04 10:10");
dtPicker.show(function(e) {
console.log(e);
mui.toast(e);
})
}
十二.复选框
1.核心
mui-input-row mui-checkbox
2.激活代码
mch
3.获取复选框的值
function getCheckBoxValue () {
var checks = getCheckBox("check_box");
if (checks.length<1) {
alert("请选择");
}else{
mui.toast(checks);
}
}
function getCheckBox (name) {
console.log(name);
var checkObj = document.getElementsByClassName(name);
var checkVal = new Array();
var k = 0;
for (var i = 0; i < checkObj.length;i++) {
if (checkObj[i].checked) {
checkVal[k] = checkObj[i].value;
k++;
}
}
return checkVal;
}
十三.单选框
1.核心
mui-radio
2.激活代码
mra
3.获取单选框的值
function getVals () {
var res = getRadioRes('rds');
if (res==null) {
alert("请选择");
}else{
mui.toast(res);
}
}
// 获取单选框值
function getRadioRes (className) {
var rdsbj = document.getElementsByClassName(className);
console.log(rdsbj);
var checkVal = null;
for (var i = 0;i