Vue学习之旅----vue UI框架 下拉加载

1 npm install mint-ui -S 

2 引入mint Ui的css 和 插件

        import Mint from 'mint-ui';

        Vue.use(Mint);
        import 'mint-ui/lib/style.css'       

3 看文档直接使用

import Vue from 'vue'
import Router from 'vue-router'
import VueResource from 'vue-resource'
import HelloWorld from '@/components/HelloWorld'
// 1.创建组件
import Home from '@/components/Home.vue'
import News from '@/components/News.vue'
import Content from '@/components/Content.vue'
import User from '@/components/User.vue'
Vue.use(Router)
Vue.use(VueResource)
export default new Router({
  // 2.配置路由   注意：名字
  routes: [
    { path: '/', redirect: 'home' },
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    { path: '/home', component: Home },
    { path: '/news', component: News, name: 'news' },
    { path: '/user', component: User },
    { path: '/content/:aid', component: Content }, // 动态路由
    { path: '*', redirect: '/home' } // 默认跳转路由
  ]
})

<template>
  <div id="news">
    我是新闻组件
    <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10" class="list">
      <li v-for="(item,key) in list" :key=key>{{ item.title }}</li>
    </ul>
    <div>loading....</div>
  </div>
</template>
<script>
// var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
export default {
  data () {
    return {
      msg: '我是一个新闻组件',
      list: [],
      j: 0,
      page: 1,
      loading: false
    }
  },
  methods: {
    // loadMore () {
    //   for (var i = 0; i < 20; i++, this.j++) {
    //     this.list.push('第' + this.j + '条')
    //   }
    //   console.log('111')
    // },
    loadMore () {
      this.requestData()
    },
    requestData () {
      this.loading = true // 请求数据的开关
      var api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=' + this.page
      this.$http.get(api).then((response) => {
        this.list = this.list.concat(response.body.result)
        ++this.page // 每次请求完成page++
        // 判断最后一页是否有数据
        if (response.body.result.length < 20) {
          this.loading = true // 终止请求
        } else {
          this.loading = false // 继续请求
        }
      }, (err) => {
        console.log(err)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.list {
  li {
    height: 3.4rem;
    line-height: 3.4rem;
    border-bottom: 1px solid #eee;
    font-size: 1.6rem;
    a {
      color: #666;
    }
  }
}
</style>