增加动画库

package.json

@@ -11,12 +11,14 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "animate.css": "^3.7.0",
     "axios": "^0.18.0",
     "echarts": "^4.2.0-rc.2",
     "element-ui": "^2.4.9",
     "moment": "^2.22.2",
     "underscore": "^1.9.1",
     "v-charts": "^1.19.0",
+    "velocity-animate": "^1.5.0",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1"

src/components/Header/message.vue

@@ -21,102 +21,102 @@
 </template>
 
 <script>
-  // 引入mescroll的vue组件
-  import MescrollVue from '@/lib/mescroll/mescroll.vue'
-
-  export default {
-    name: 'message',
-    components: {
-      MescrollVue
-    },
-    data () {
-      return {
-        mescroll: null, // mescroll实例对象
-        mescrollUp: {
-          callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page, mescroll) { getListData(page); }
-          page: {
-            num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
-            size: 10 // 每页数据的数量
-          },
-          noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
-          toTop: {
-            src: './static/images/mescroll/mescroll-totop.png' // 回到顶部按钮的图片路径,支持网络图
-          },
-          empty: {
-            // 列表第一页无任何数据时,显示的空提示布局; 需配置warpId才生效;
-            warpId: 'dataList', // 父布局的id;
-            icon: './static/images/mescroll/mescroll-empty.png', // 图标,支持网络图
-            tip: '暂无相关数据~', // 提示
-            btntext: '去逛逛 >', // 按钮,默认""
-            btnClick () { // 点击按钮的回调,默认null
-              alert('点击了按钮,具体逻辑自行实现')
-            }
-          },
-          lazyLoad: {
-            use: true // 是否开启懒加载,默认false
+// 引入mescroll的vue组件
+import MescrollVue from '@/lib/mescroll/mescroll.vue'
+
+export default {
+  name: 'message',
+  components: {
+    MescrollVue
+  },
+  data () {
+    return {
+      mescroll: null, // mescroll实例对象
+      mescrollUp: {
+        callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page, mescroll) { getListData(page); }
+        page: {
+          num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
+          size: 10 // 每页数据的数量
+        },
+        noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
+        toTop: {
+          src: './static/images/mescroll/mescroll-totop.png' // 回到顶部按钮的图片路径,支持网络图
+        },
+        empty: {
+          // 列表第一页无任何数据时,显示的空提示布局; 需配置warpId才生效;
+          warpId: 'dataList', // 父布局的id;
+          icon: './static/images/mescroll/mescroll-empty.png', // 图标,支持网络图
+          tip: '暂无相关数据~', // 提示
+          btntext: '去逛逛 >', // 按钮,默认""
+          btnClick () { // 点击按钮的回调,默认null
+            alert('点击了按钮,具体逻辑自行实现')
           }
         },
-        dataList: [], // 列表数据
-        pdType: 0 // 菜单
-      }
-    },
-    beforeRouteEnter (to, from, next) { // 如果没有配置回到顶部按钮或isBounce,则beforeRouteEnter不用写
-      next(vm => {
-        vm.$refs.mescroll.beforeRouteEnter() // 进入路由时,滚动到原来的列表位置,恢复回到顶部按钮和isBounce的配置
-      })
+        lazyLoad: {
+          use: true // 是否开启懒加载,默认false
+        }
+      },
+      dataList: [], // 列表数据
+      pdType: 0 // 菜单
+    }
+  },
+  beforeRouteEnter (to, from, next) { // 如果没有配置回到顶部按钮或isBounce,则beforeRouteEnter不用写
+    next(vm => {
+      vm.$refs.mescroll.beforeRouteEnter() // 进入路由时,滚动到原来的列表位置,恢复回到顶部按钮和isBounce的配置
+    })
+  },
+  beforeRouteLeave (to, from, next) { // 如果没有配置回到顶部按钮或isBounce,则beforeRouteLeave不用写
+    this.$refs.mescroll.beforeRouteLeave() // 退出路由时,记录列表滚动的位置,隐藏回到顶部按钮和isBounce的配置
+    next()
+  },
+  methods: {
+    // mescroll组件初始化的回调,可获取到mescroll对象
+    mescrollInit (mescroll) {
+      this.mescroll = mescroll
     },
-    beforeRouteLeave (to, from, next) { // 如果没有配置回到顶部按钮或isBounce,则beforeRouteLeave不用写
-      this.$refs.mescroll.beforeRouteLeave() // 退出路由时,记录列表滚动的位置,隐藏回到顶部按钮和isBounce的配置
-      next()
+    // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
+    upCallback (page, mescroll) {
+      // 模拟联网
+      this.getListDataFromNet(page.num, page.size)
     },
-    methods: {
-      // mescroll组件初始化的回调,可获取到mescroll对象
-      mescrollInit (mescroll) {
-        this.mescroll = mescroll
-      },
-      // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
-      upCallback (page, mescroll) {
-        // 模拟联网
-        this.getListDataFromNet(page.num, page.size)
-      },
 
-      // 选中状态的样式
-      getActiveCls (type) {
-        return this.pdType === type ? 'active' : ''
-      },
-      // 切换菜单
-      changeTab (type) {
-        if (this.pdType !== type) {
-          this.pdType = type
-          this.dataList = []// 在这里手动置空列表,可显示加载中的请求进度
-          this.mescroll.resetUpScroll() // 刷新列表数据
-        }
-      },
+    // 选中状态的样式
+    getActiveCls (type) {
+      return this.pdType === type ? 'active' : ''
+    },
+    // 切换菜单
+    changeTab (type) {
+      if (this.pdType !== type) {
+        this.pdType = type
+        this.dataList = []// 在这里手动置空列表,可显示加载中的请求进度
+        this.mescroll.resetUpScroll() // 刷新列表数据
+      }
+    },
 
-      /* 联网加载列表数据
+    /* 联网加载列表数据
          在您的实际项目中,请参考官方写法: http://www.mescroll.com/api.html#tagUpCallback
          请忽略getListDataFromNet的逻辑,这里仅仅是在本地模拟分页数据,本地演示用
          实际项目以您服务器接口返回的数据为准,无需本地处理分页.
          * */
-      async getListDataFromNet (pageNum, pageSize) {
-        // 延时一秒,模拟联网
-        const res = await this.axios.get('http://rap2api.taobao.org/app/mock/115626/store/notice!getStoreNoticeListByPageAction.do',{
-          params:{
-            pageNo:pageNum,
-            pageSize,
-            push_state:2
-          }
-        })
-        if (res.data.code === 0) {
-          const resData = res.data.dataList
-          const length = this.dataList.length
-          if (length <= res.data.totalCount) {
-            this.dataList = this.dataList.concat(resData)
-          }
+    async getListDataFromNet (pageNum, pageSize) {
+      // 延时一秒,模拟联网
+      const res = await this.axios.get('http://rap2api.taobao.org/app/mock/115626/store/notice!getStoreNoticeListByPageAction.do', {
+        params: {
+          pageNo: pageNum,
+          pageSize,
+          push_state: 2
+        }
+      })
+      if (res.data.code === 0) {
+        const resData = res.data.dataList
+        const length = this.dataList.length
+        if (length <= res.data.totalCount) {
+          this.dataList = this.dataList.concat(resData)
         }
       }
     }
   }
+}
 </script>
 
 <style scope>

src/main.js

@@ -4,8 +4,10 @@ import Vue from 'vue'
 import App from './App'
 import router from './router'
 import ElementUI from 'element-ui'
+
 import './assets/styles/reset.css'
 import './assets/styles/common.css'
+import 'animate.css'
 // import 'element-ui/lib/theme-chalk/index.css'
 import qs from 'qs'
 import store from './store'
@@ -15,7 +17,7 @@ import * as filters from './filters'
 import echarts from 'echarts'
 import VCharts from 'v-charts'
 
-import * as plugins from './plugin'
+import plugins from './plugin'
 
 Vue.use(VCharts)
 Axios.defaults.withCredentials = true // 让ajax携带cookie
@@ -40,7 +42,11 @@ Axios.interceptors.request.use(
 )
 
 Vue.use(ElementUI)
-Vue.use(plugins)
+
+Object.keys(plugins).forEach(key => {
+  const plugin = plugins[key]
+  Vue.use(plugin)
+})
 
 Object.keys(filters).forEach(key => {
   Vue.filter(key, filters[key])

src/plugin/index.js

 import moment from './moment'
 import underscore from './underscore'
-export const momentPlugin = moment
-export const underscorePlugin = underscore
+import velocity from './velocity'
+
+export default {
+  moment,
+  underscore,
+  velocity
+}

src/plugin/velocity/index.js

+import velocity from 'velocity-animate'
+import 'velocity-animate/velocity.ui'
+
+class Animate {
+  install (Vue, options) {
+    // 4. 添加实例方法
+    Vue.prototype.$velocity = velocity
+  }
+}
+
+export default new Animate()