HBuilderX打包web网站之wap2app设置底部菜单tabBar-连界优站

下面是代码，可以直接用：

第一步，先下载2个文件或者复制也行，那就新建吧:

分别新建一个css文件，命名为 __wap2apptabbar.css

.tab { position: absolute; left: 0; right: 0; bottom: 0; height: 50px; } .tab-inner { display: table; table-layout: fixed; background-color: #f7f7f7; -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .85); box-shadow: 0 0 1px rgba(0, 0, 0, .85); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .tab-item { display: table-cell; width: 1%; height: 50px; overflow: hidden; color: #666; text-align: center; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } .tab-item-icon img { width: 100%; height: 100%; } .tab-item .tab-item-icon img:nth-child(1) { display: block; } .tab-item .tab-item-icon img:nth-child(2) { display: none; } .tab-item.active .tab-item-icon img:nth-child(1) { display: none; } .tab-item.active .tab-item-icon img:nth-child(2) { display: block; } .tab-item-label { display: block; overflow: hidden; font-size: 12px; } .tab-item-icon { margin: 0 auto; width: 24px; height: 24px; } .tab-item-icon-bars{ } .tab.no-label .tab-item-icon { margin: 0 auto; width: 40px; height: 40px; } .tab.no-icon .tab-item-label { font-size: 16px; } .tab-item.active { color: #FF5777; }

第二个文件命名为：__wap2apptabbar.js

(function(window, document) { var TabBar = function(options) { options = options || {}; this.tabClass = options.tabClass

第三步，取消注释：

第四步，在client_index.html设置tabBar代码：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="viewport-fit=cover,width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <!--使用本地选项卡时，将如下两行代码注释取消--> <link rel="stylesheet" type="text/css" href="__wap2apptabbar.css" /> <script src="__wap2apptabbar.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> /*自定义选项卡文字颜色示例*/ .tab-item { color: black;//选项卡文字默认为黑色 } .tab-item.active { color: blue;//选项卡文字高亮时为蓝色 } </style> </head> <body> <script> new TabBar({ list: [{ url: "https://huamaotianxing.com/", text: "首页", iconPath: 'home.png', selectedIconPath: 'home-selected.png' }, { url: "https://huamaotianxing.com/open/course/explore", text: "在看", iconPath: 'tab1.png', //本地图标 selectedIconPath: 'tab1-selected.png' }, { url: "https://huamaotianxing.com/my/courses/learning", text: "我的", iconPath: 'http://m.exampple.com/imgs/about.png',//网络图标 selectedIconPath: 'http://m.exampple.com/imgs/about-selected.png' }] }); </script> </body> </html>

第6步，在sitemap.json文件配置一下：

如何购买高质量高防香港服务器？

1年前

09512

{ "global": { "webviewParameter": { "titleNView": { "autoBackButton": true, "backgroundColor": "#f7f7f7",//导航栏背景色 "titleColor": "#000000",//标题颜色 "titleSize": "17px" }, "statusbar": { //系统状态栏样式(前景色) "style": "dark" }, "appendCss": "", "appendJs": "" }, "easyConfig": {} }, "pages": [ { "webviewId": "__W2A__huamaotianxing.com",//首页 "matchUrls": [ { "href": "https://huamaotianxing.com" }, { "href": "https://huamaotianxing.com/" } ], "webviewParameter": { "titleNView": false, "statusbar": { //状态条背景色， //首页不使用原生导航条，颜色值建议和global->webviewParameter->titleNView->backgroundColor颜色值保持一致 //若首页启用了原生导航条，则建议将首页的statusbar配置为false，这样状态条可以和原生导航条背景色保持一致； "background": "#f7f7f7" }, "tabBar": {//选项卡配置，仅首页支持 "height": "50px",//选项卡高度，默认为50px "list": [ { "url": "https://huamaotianxing.com/" //tab1页面地址 }, { "url": "https://huamaotianxing.com/open/course/explore" //tab2页面地址 }, { "url": "https://huamaotianxing.com/my/courses/learning" //tab3页面地址 } ] } } } ] }

第7步，运行到真机上测试了，ok了。

文章版权归作者所有，未经允许请勿转载。

THE END