基於mint-ui的移動應用開發案例三(首頁)
阿新 • • 發佈:2019-02-07
本節主要包含以下內容:
- 首頁大致佈局
- 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
index.jsexport const TOGGLE_FOOTER = 'TOGGLE_FOOTER'; export const SELECT_TAB = 'SELECT_TAB';
接著在main.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
接下來我們的頁面要想使用這些狀態或者想要改變這些狀態,只需要 this.$store.state.footerVisible 或者 this.$store.commit('TOGGLE_FOOTER'); 就可以了。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} });
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上最新的專案:
如果你專案搭建中遇到問題,請提交issue或者及時與我聯絡,謝謝。