mpvue+微信小程序底部导航Tabbar不显示bug
原生微信小程序中,tabbar在app.json文件中配置,详见开发文档https://developers.weixin.qq.com/miniprogram/dev/framework/config.html对应mpvue,有两种设置方式:一、在main.js中设置 需注意:Eslint检查要求string类型为单引号(json文件要求双引号)pages字段注册页...
·
原生微信小程序中,tabbar在app.json文件中配置,详见开发文档
https://developers.weixin.qq.com/miniprogram/dev/framework/config.html
对应mpvue,有两种设置方式:
一、在main.js中设置
需注意:
- Eslint检查要求string类型为单引号(json文件要求双引号)
- pages字段注册页面时,页面前带有^符号的会被翻译成首页
- 如果包含tabbar的页面不设置为首页显示,则无法正常显示tabbar(建议把index路径设置为带tabbar的首页)
import Vue from 'vue'
import App from './App'
//引入store
import store from './store/index'
//把store挂载到全局
Vue.prototype.$store = store;
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue(App)
app.$mount()
//此部分会被翻译为小程序的app.json
export default {
// 这个字段设置路由、title、tabbar
config: {
// 页面前带有 ^ 符号的,会被编译成首页,其他页面可以选填,我们会自动把 webpack entry 里面的入口页面加进去
// eslint检测字符串必须用单引号
'pages': ['^pages/notification/main', 'pages/trending/main', 'pages/profile/main', 'pages/search/main'],
'window': {
'backgroundTextStyle': 'light',
'navigationBarBackgroundColor': '#fff',
'navigationBarTitleText': 'MiniGithub',
'navigationBarTextStyle': 'black'
},
'tabBar': {
'backgroundColor': '#fafafa',
'borderStyle': 'white',
'selectedColor': '#b4282d',
'color': '#666',
'list': [{
'pagePath': 'pages/notification/main',
'text': 'Notification'
},
{
'pagePath': 'pages/trending/main',
'text': 'Trending'
},
{
'pagePath': 'pages/profile/main',
'text': 'Profile'
},
{
'pagePath': 'pages/search/main',
'text': 'Search'
}
]
}
}
}
二、在app.json中设置
需注意:
- pages字段注册页面时,第一个字段即pages/notification/main会被翻译成首页
- Eslint检查要求json格式为双引号
{
"pages": [
"pages/notification/main",
"pages/index/main",
"pages/logs/main",
"pages/counter/main",
"pages/trending/main",
"pages/profile/main",
"pages/search/main"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "MiniGithub",
"navigationBarTextStyle": "black"
},
"tabBar": {
"backgroundColor": "#fafafa",
"borderStyle": "white",
"selectedColor": "#b4282d",
"color": "#666",
"list": [
{
"pagePath": "pages/notification/main",
"text": "Notification"
},
{
"pagePath": "pages/trending/main",
"text": "Trending"
}
]
}
}
npm run dev编译mpvue项目后在微信开发者工具中运行打包好的dist文件夹,最终效果:
更多推荐
已为社区贡献1条内容
所有评论(0)