基於mint-ui的移動應用開發案例三（首頁）

本節主要包含以下內容：

1. 首頁大致布局
2. vuex進行底部tabbar的顯示與隱藏控制和tab選中控制
3. 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對應內容后的處理函數，這里是彈出一個信息對話框，然后根據選擇“確認”“取消”來執行不同的動作。本例只是簡單的模擬一下各控件的使用，不涉及數據操作。

2018-07-12更新：由於后續增加和改進的東西比較多，強烈建議參考github上最新的項目：

https://github.com/JerryYuanJ/a-vue-app-template

    如果你項目搭建中遇到問題，請提交issue或者及時與我聯系，謝謝。