目录
1、mui底部tab页切换
html
<nav class="mui-bar mui-bar-tab footer flex-row">
<a href="pages/home/home.html" class="mui-tab-item mui-active flex-col" id="home">
<i></i>
<span class="mui-tab-label">首页</span>
</a>
<a href="pages/message/message.html" class="mui-tab-item flex-col" id="message">
<i></i>
<span class="mui-tab-label">消息</span>
</a>
<a href="pages/user/mine.html" class="mui-tab-item flex-col" id="mine">
<i></i>
<span class="mui-tab-label">设置</span>
</a>
</nav>css
.footer {
height: 14.17rem;
align-items: center;
background: rgba(255, 255, 255, 0.1);
box-shadow: 0rem 1rem 1rem rgba(255, 255, 255, 0.5);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 3rem 3rem 0rem 0rem;
}
.footer::before {
content: '';
width: 10rem;
height: 10rem;
left: 5rem;
bottom: -5rem;
border-radius: 50%;
background: #00FFC2;
position: absolute;
box-shadow: inset 0 0 0 6000px #00FFC2;
filter: blur(80px);
}
.footer .mui-tab-item {
width: 30%;
height: 14.17rem;
align-items: center;
padding: 1.33rem 0rem 5.83rem 0rem;
}
/* 未选中状态 */
.footer .mui-tab-item:first-child i {
width: 4.33rem;
height: 4rem;
background-size: cover;
background: url(../img/home.png) no-repeat center;
margin-bottom: 1rem;
}
.footer .mui-tab-item:nth-child(2) i {
width: 4rem;
height: 4rem;
background-size: cover;
background: url(../img/messageg.png) no-repeat center;
margin-bottom: 1rem;
}
.footer .mui-tab-item:nth-child(3) i {
width: 3.33rem;
height: 4rem;
background-size: cover;
background: url(../img/userg.png) no-repeat center;
margin-bottom: 1rem;
}
.footer .mui-tab-item .mui-tab-label {
color: rgba(255, 255, 255, 0.3);
font-size: 1.67rem;
font-family: PingFang SC;
font-weight: 400;
font-size: 1.67rem;
line-height: 2.33rem;
}
/* 选中状态 */
.footer .mui-active.mui-tab-item:first-child i {
width: 4.33rem;
height: 4rem;
background-size: cover;
background: url(../img/home.png) no-repeat center;
margin-bottom: 1rem;
}
.footer .mui-active.mui-tab-item:nth-child(2) i {
width: 4rem;
height: 4rem;
background-size: cover;
background: url(../img/messageg.png) no-repeat center;
margin-bottom: 1rem;
}
.footer .mui-active.mui-tab-item:nth-child(3) i {
width: 3.33rem;
height: 4rem;
background-size: cover;
background: url(../img/userg.png) no-repeat center;
margin-bottom: 1rem;
}
.footer .mui-active.mui-tab-item .mui-tab-label {
color: #00FFC2;
font-size: 1.67rem;
font-family: PingFang SC;
font-weight: 400;
font-size: 1.67rem;
line-height: 2.33rem;
}js
let subpages = ['pages/home/home.html', 'pages/message/message.html', 'pages/user/mine.html'];
mui.init({})
let subpage_style = {
top: '0px',
bottom: '120px'
};
let aniShow = {};
//当前激活选项
let activeTab = subpages[0];
//创建子页面，首个选项卡页面显示，其它均隐藏；
mui.plusReady(function() {
let self = plus.webview.currentWebview();
plus.navigator.setStatusBarBackground('#000');
for (let i = 0; i < subpages.length; i++) {
let temp = {};
let sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
if (i > 0) {
sub.hide();
} else {
temp[subpages[i]] = "true";
mui.extend(aniShow, temp);
}
self.append(sub);
}
});
//选项卡点击事件
mui('.mui-bar-tab').on('tap', 'a', function(e) {
let targetTab = this.getAttribute('href');
if (targetTab == activeTab) {
return;
}
//显示目标选项卡
//若为iOS平台或非首次显示，则直接显示
if (mui.os.ios || aniShow[targetTab]) {
plus.webview.show(targetTab);
} else {
//否则，使用fade-in动画，且保存变量
let temp = {};
temp[targetTab] = "true";
mui.extend(aniShow, temp);
plus.webview.show(targetTab, "fade-in", 0);
}
//隐藏当前;
plus.webview.hide(activeTab);
//更改当前活跃的选项卡
activeTab = targetTab;
});
2、mui中tab页面左右滑动以及内容左右滑动
html
<div id="list" class="list"></div>是用来填充从后台获取的数据的
<!-- swiper -->
<div id="slider" class="mui-slider mui-fullscreen">
<div
class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<div class="mui-scroll tabCut">
<span class="mui-control-item mui-active" data-index="0">全部</span>
<span class="mui-control-item" data-index="1">待审核</span>
<span class="mui-control-item" data-index="2">待确认</span>
<span class="mui-control-item" data-index="3">正在取消</span>
<span class="mui-control-item" data-index="3">已完成</span>
</div>
</div>
<div class="mui-slider-group">
<div class="mui-slider-item mui-control-content mui-active">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<div id="list" class="list"></div>
</div>
</div>
</div>
<div class="mui-slider-item mui-control-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<div id="list1" class="list"></div>
</div>
</div>
</div>
<div class="mui-slider-item mui-control-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<div id="list2" class="list"></div>
</div>
</div>
</div>
<div class="mui-slider-item mui-control-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<div id="list3" class="list"></div>
</div>
</div>
</div>
<div class="mui-slider-item mui-control-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<div id="list4" class="list"></div>
</div>
</div>
</div>
</div>
</div>css
/* tab切换 */
/* new */
* {
/* pan-y表示启用单指垂直平移手势(上下滑动事件)。 */
touch-action: pan-y;
}
.tabCut {
align-items: center;
font-size: 0.28rem;
font-family: PingFang SC;
font-weight: 400;
line-height: 0.4rem;
height: 0.4rem;
color: #FFFFFF;
overflow-x: auto;
padding-bottom: 0.08rem;
}
.mui-fullscreen {
margin-top: 3.09rem;
padding: 0rem 0.32rem;
}
.mui-segmented-control.mui-scroll-wrapper .mui-control-item {
padding: 0rem 0.2rem;
padding-bottom: 0.08rem;
}
.mui-segmented-control.mui-scroll-wrapper .mui-control-item.mui-active {
color: #00FFC2;
font-size: 0.32rem;
border-bottom: 0.06rem solid #00FFC2!important;
}
.mui-segmented-control.mui-scroll-wrapper {
line-height: 0.8rem;
height: 0.9rem;
}
.mui-segmented-control.mui-scroll-wrapper .mui-scroll {
min-height: 10.85rem;
width: 100%;
}
.mui-fullscreen .mui-segmented-control~.mui-slider-group {
top: 1.5rem;
}
/* tab切换 */js
// 顶部tab页切换
mui('.mui-scroll-wrapper').scroll({
bounce: true,
indicators: true,
deceleration: mui.os.ios ? 0.003 : 0.0009
});
mui('.mui-scroll').on('tap', '.mui-control-item:not(.active)', function() {
mui('.mui-slider').slider().gotoItem(this.getAttribute('data-index'));
});3、mui中时间选择器的调用
<span id="startTime">选择日期</span>// 默认的当前时间
let time1 = dateFormat("YYYY-mm-dd", new Date())
let dom1 = document.getElementById("startTime")
dom1.addEventListener('tap', function() {
let dtPicker = new mui.DtPicker({
type: 'date'
});
/*参数：'datetime'-完整日期视图(年月日时分)
'date'--年视图(年月日)
'time' --时间视图(时分)
'month'--月视图(年月)
'hour'--时视图(年月日时)
*/
dtPicker.show(function(selectItems) {
let y = selectItems.y.text; //获取选择的年
let m = selectItems.m.text; //获取选择的月
let d = selectItems.d.text; //获取选择的日
let date = y + "-" + m + "-" + d;
})
})需要引入的文件：在官网上找不到，可以使用hbuilderx创建一个mui项目，在这里边找文件
4、mui中底部弹框的调用
还是需要引入上边的文件
<span id="set" class="common">设备缺陷处理单</span>// 点击设备缺点
let setPicker = new mui.PopPicker();
setPicker.setData([{
value: '1',
text: '缺点1'
}, {
value: '2',
text: '缺点2'
}, {
value: '3',
text: '缺点3'
}, {
value: '4',
text: '缺点4'
}, {
value: '5',
text: '缺点5'
}]);
let setObj = document.getElementById('set')
setObj.addEventListener('tap', function() {
setPicker.show(function(items) {
setObj.innerText = items[0].text
setObj.style.color = "#fff"
});
})
411
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
