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

2 篇文章 0 订阅

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

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

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

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值