html中写:
<nav class="mui-bar mui-bar-tab">
<a href="home.html" class="mui-tab-item mui-active" id="defaultTab">//首页
<span class="mui-icon iconfont icon-shouye"></span>
<span class="mui-tab-label">首页</span>
</a>
<a href="fabu.html" class="mui-tab-item">
<span class="mui-icon iconfont icon-money"></span>
<span class="mui-tab-label">更多赚钱</span>
</a>
<a href="xinxi.html" class="mui-tab-item">
<span class="mui-icon iconfont icon-xiazai16"></span>
<span class="mui-tab-label">信 息</span>
</a>
<a href="chengjiao.html" class="mui-tab-item">
<span class="mui-icon mui-icon-locked"></span>//这是图标库有的图标
<span class="mui-tab-label">成 交</span>
</a>
<a href="user.html" class="mui-tab-item">
<span class="mui-icon iconfont icon-wode"></span>//这里我是自定义的图标
<span class="mui-tab-label">我 的</span>
</a>
</nav>
js中写:
//启用双击监听
mui.init({
gestureConfig:{
doubletap:true
},
subpages:[{
url:'home.html',//首页
id:'MainViwe',
styles:{
top: '0',
bottom: '51px'
}
}]
});
mui('.mui-scroll-wrapper').scroll({
deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
});
//底部选项卡切换跳转
(function jumpPage(){
//跳转页面
var subpages = ['home.html','fabu.html', 'xinxi.html', 'chengjiao.html','user.html'];//有多少个主页面,依次写
var subpage_style = {
top: '44px',
bottom: '51px'
};
var aniShow = {};//动画显示
//首次启动切滑效果
//当前激活选项
var activeTab = subpages[0];
//选项卡点击事件
mui('.mui-bar-tab').on('tap', 'a', function(e) {
var targetTab = this.getAttribute('href');
$('#MainViwe').attr('src',targetTab);
});
//自定义事件,模拟点击“首页选项卡”
document.addEventListener('gohome', function() {
var defaultTab = document.getElementById("defaultTab");
//模拟首页点击
mui.trigger(defaultTab, 'tap');
//切换选项卡高亮
var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
if (defaultTab !== current) {
current.classList.remove('mui-active');
defaultTab.classList.add('mui-active');
}
});
})()
亲测有效,有错请指出来,谢谢