时间戳

首页 > 技术文章 > 基于mint-ui的移动应用开发案例三（首页）

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

jerryyj 原文

本节主要包含以下内容：

  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',  '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或者及时与我联系，谢谢。


推荐阅读