tabbar在mpvue中的具体配置方法

[VICTORYGS]

tabbar在mpvue中的具体配置方法 求告知，原生weui官网的配置方法的地址也没找到呢...
谢谢

[KuangPF]

小程序配置文档

在利用mpvue-quickstart生成的项目目录中，src/main.js对应就是小程序中的 app.json ，tabbar配置和小程序中一样，例如：

import Vue from 'vue'
import App from './App'
import './css/app.css'
import store from './store';
Vue.config.productionTip = false;
App.mpType = 'app';
Vue.prototype.$store = store;
import '../static/weui/weui.css'
const app = new Vue({
  App
})
app.$mount();

export default {
  // 这个字段走 app.json
  config: {
    pages: [], // Will be filled in webpack
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'weui for mpvue',
      navigationBarTextStyle: 'black'
    },
    tabBar: {
      color: '#999999',
      selectedColor: '#1AAD16',
      backgroundColor: '#ffffff',
      borderStyle: 'white',
      list: [{
          pagePath: 'pages/tabbar/tabbar',
          text: '微信',
          iconPath: 'static/images/icon_nav_button.png',
          selectedIconPath: 'static/images/icon_nav_button.png'
        },
        {
          pagePath: 'pages/tabbar/tabbar',
          text: '通讯录',
          iconPath: 'static/images/icon_nav_cell.png',
          selectedIconPath: 'static/images/icon_nav_cell.png'
        },
        {
          pagePath: 'pages/tabbar/tabbar',
          text: '发现',
          iconPath: 'static/images/icon_nav_cell.png',
          selectedIconPath: 'static/images/icon_nav_cell.png'
        },
        {
          pagePath: 'pages/tabbar/tabbar',
          text: '我',
          iconPath: 'static/images/icon_nav_toast.png',
          selectedIconPath: 'static/images/icon_nav_toast.png'
        }
      ]
    }
  }
}

只需在对应的 tabBar 字段中进行对应页面的配置即可。

[ExcellentJR]

@KuangPF 你好，请问底部tabbar各项的顺序是根据什么来定的？难道是根据各项text字段的值的拼音开头字母排的序吗？有办法进行修改吗？

[ExcellentJR]

@KuangPF emmmm，我找到了小程序的文档说的是按照list的数组排序，但是我自己项目中并不是这么表现的，好奇怪。。。

[KuangPF]

@ExcellentJR 你方便提供一下你项目src/main.js代码不，这样方便排查一下问题

[ExcellentJR]

import Vue from 'vue'
import App from './App'
import fly from './utils/interceptor'

// import '../static/weui/weui.css'
Vue.config.productionTip = false
App.mpType = 'app'
Vue.prototype.$http = fly // 将fly实例挂在vue原型上

const app = new Vue(App)
app.$mount()

export default {
  // 这个字段走 app.json
  config: {
    // 页面前带有 ^ 符号的，会被编译成首页，其他页面可以选填，我们会自动把 webpack entry 里面的入口页面加进去
    // pages: ['pages/logs/main', '^pages/index/main', 'pages/address/main', 'pages/goodslist/main'],
    pages: [],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black'
    },
    tabBar: {
      color: '#818181',
      selectedColor: '#fe4e2c',
      backgroundColor: '#ffffff',
      borderStyle: '#979797',
      list: [{
        pagePath: 'pages/goodslist/main',
        text: '更多',
        iconPath: 'static/images/Category.png',
        selectedIconPath: 'static/images/ic-more-change.png'
      }, {
        pagePath: 'pages/order/main',
        text: '订单',
        iconPath: 'static/images/Viewlist.png',
        selectedIconPath: 'static/images/Viewlist.png'
      }, {
        pagePath: 'pages/usercenter/main',
        text: '我的',
        iconPath: 'static/images/personal-center.png',
        selectedIconPath: 'static/images/personal-center.png'
      }]
    }
  }
}

[ExcellentJR]

@KuangPF 你好，代码在上一层，我试了试好像是根据pagePath的字母顺序来的。。。

[ExcellentJR]

@KuangPF 不好意思，我问题叙述有误不太明确，应该是默认的激活的那个tab，就是刚打开小程序时的那个active的项，是根据什么来的？现在我看是根据pagePath的字母顺序来的

[KuangPF]

你看下是不是这个原因引起的，配置了tab选项卡不生效,看是不是由于 pages 设置了 ^，然后在tabBar里面没有写进去。

[ExcellentJR]

@KuangPF 这个我待会儿试一下，另外这个图标的大小是怎么设置的啊？官方文档上说建议81px*81px，用了这个之后图标会非常大，还需要有其他的设置吗？难道是x3的吗？应该是27px？

[KuangPF]

就是微信官方建议的图片大小，不需要其他设置吧，你检查下看是不是其他问题造成图片过大的。

[wenwangzhishang]

如何实现动态的tabbar呢？除了自定义组件之外