vuejs+Mint UI 开发流加载列表加载

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/daily886/article/details/81901137

Mint UI

基于 Vue.js 的移动端组件库

官网： http://mint-ui.github.io/#!/zh-cn

安装 mint-ui

// 安装
# Vue 1.x
npm install mint-ui@1 -S
# Vue 2.0
npm install mint-ui -S

vuejs/src/components 目录下，新建目录和文件 mintui/articlelist.vue 内容如下

<template>
  <div>
    <ul
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="loading"
      infinite-scroll-distance="10">
      <li v-for="(item, key) in list" :key="key" style="text-align: center;line-height: 40px;">{{ item }}</li>
    </ul>
  </div>
</template>
<script>
// infinite-scroll-disabled 若为真，则无限滚动不会被触发 Boolean false
// infinite-scroll-distance 触发加载方法的滚动距离阈值（像素） Number 0
// infinite-scroll-immediate-check若为真，则指令被绑定到元素上后会立即检查是否需要执行加载方法。在初始状态下内容有可能撑不满容器时十分有用 Boolean true
// infinite-scroll-listen-for-event一个event，被执行时会立即检查是否需要执行加载方法。Function
import { InfiniteScroll } from 'mint-ui'
export default {
  // InfiniteScroll 需要使用 directives 来加载
  directives: { InfiniteScroll },
  data () {
    return {
      loading: false,
      list: []
    }
  },
  methods: {
    loadMore () {
      this.loading = true
      // 这里是ajax请求回来的数据
      let ajaxGetData = [
        {q: '刘德华女儿正面'},
        {q: '刘德华女儿正面'},
        {q: '欧阳娜娜 伯克利'},
        {q: '爵迹2宣传方致歉'},
        {q: '女子起诉nasa'},
        {q: 'ini_set可以设置的参数'},
        {q: 'jq 获取元素个数少一个'},
        {q: 'polebuilder循环'},
        {q: 'polebuilder'},
        {q: '邪不压正西安路演'}
      ]
      // 循环数据，插入到 list里面，即可显示在页面上
      for (let i = 1; i <= ajaxGetData.length - 1; i++) {
        this.list.push(ajaxGetData[i].q)
      }
      this.loading = false
    }
  }
}
</script>

新建路由， 编辑 vuejs/src/router/index.js  加入内容：

// 导入组件模板
import articlelist from '@/components/mintui/articlelist'

// 添加路由地址
{
   path: '/articlelist',
   component: articlelist
}

最后，访问地址，下拉到底部，即可看到效果

http://localhost:8081/#/articlelist

附：

如出现报错：Failed to resolve directive: infinite-scroll

这是因为 你使用了组件形式加载一个指令

修改为下面的加载形式即可