基于mint-ui的移动应用开发案例三（首页）

本节主要包含以下内容：

首页大致布局
vuex进行底部tabbar的显示与隐藏控制和tab选中控制
mint-cell-swipe组件的使用

1.vuex的引入与使用

首先在state文件夹中新建一个mutation_types.js用于存放要提交的动作，和一个index.js主要配置js。这里主要是定义了两个动作，一个叫TOOGLE_FOOTER用于控制底部bar的显示与否，一个叫SELECTED_TAB用于控制底部tab选中的标签。

在index.js中定义的状态state和mutations也是这两个相关的：

mutation_types.js

export const TOGGLE_FOOTER = 'TOGGLE_FOOTER';
export const SELECT_TAB = 'SELECT_TAB';

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import * as types from './mutation-types'//导入

Vue.use(Vuex);

const store = new Vuex.Store({
state: {
footerVisible: true,//底部bar显示的状态
selectedTab: 'main'//选中的tab标签
},
mutations: {
[types.TOGGLE_FOOTER] (state) {
state.footerVisible = !state.footerVisible
},
[types.SELECT_TAB](state, val){
state.selectedTab = val
}
}
});
export default store

接着在main.js中引入状态管理：

import Vue from 'vue'
import App from './App'
import router from './router'
import MintUI from 'mint-ui'

import store from './store/index.js'//引入

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

Vue.use(MintUI);

/*Vue.config.productionTip = false;*/

new Vue({
el: '#app',
router,
store,//使用
template: '<App/>',
components: {App}
});

接下来我们的页面要想使用这些状态或者想要改变这些状态，只需要 this.$store.state.footerVisible 或者
this.$store.commit('TOGGLE_FOOTER'); 就可以了。

2.首页布局与mint-cell-swipe的使用

首页的实现很简单，就是一个header和一个可以右滑菜单的cell，这些都是mint里面的组件，可以直接使用，先上代码：

<template>
<div id="index">
<mt-header fixed title="首页"></mt-header>
<div class="content">
<mt-cell-swipe
:right="right"
title="未读通知">
<span><mt-badge type="error">10</mt-badge></span>
</mt-cell-swipe>

</div>
</div>
</template>
<style scoped>
.content {
margin-top: 40px;
}

</style>
<script>
import {Toast} from 'mint-ui';

export default {
data(){
return {
right: [
{
content: '删除',
style: {background: 'red', color: '#fff', width: '50px', textAlign: 'center'},
handler: () => this.$messagebox({
title: '提示',
message: '确定执行此操作?',
showCancelButton: true
}).then((action) => {
if (action === 'confirm') {
Toast({message: '删除成功'})
} else {

}
})
}
]
}
},
created(){
let _footer = this.$store.state.footerVisible;
if (!_footer) {
this.$store.commit('TOGGLE_FOOTER');
}
this.$store.commit('SELECT_TAB', 'main')
}
}
</script>

可以看到，在钩子函数created中，获取了当前footerbar的显示状态，如果是false的话，就变成true显示；接着将选中的tab标签设置为main。

另外，mt-cell-swipe组件的属性right接收一个对象，其中content表示右滑后显示的内容，style表示content的样式，handler()表示点击content对应内容后的处理函数，这里是弹出一个信息对话框，然后根据选择“确认”“取消”来执行不同的动作。本例只是简单的模拟一下各控件的使用，不涉及数据操作。