1.安装Mint UI并配置环境

  1. 安装模块
    npm i mint-ui -S
  2. 引入 Mint UI
    (1)完整引入
    在 main.js 中写入以下内容:
//main.js

import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import App from './App.vue'

Vue.use(MintUI)

new Vue({
  el: '#app',
  components: { App }
})

需要注意的是,样式文件需要单独引入。
(2)按需引入
借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。
首先,安装 babel-plugin-component:

npm install babel-plugin-component -D

然后,将 .babelrc 修改为:

{
  "presets": [
    ["es2015", { "modules": false }]
  ],
  "plugins": [["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]]
}

我一般改完之后是这样的,也可以直接拿去用

{
  "presets": [
      ["es2015", { "modules": false }],
      [
          "env",
          {
              "modules": false,
              "targets": {
                  "browsers": [
                      "> 1%",
                      "last 2 versions",
                      "not ie <= 8"
                  ]
              }
          }
      ],
      "stage-2"
  ],
  "plugins": [
      "transform-vue-jsx",
      "transform-runtime",
      [
          "component",
          [
              {
                  "libraryName": "mint-ui",
                  "style": true
              }
          ]
      ]
  ]
}

比如我们引入组件中的Loadmore,上拉加载,下拉刷新功能,在main.js中写:

import { Loadmore } from 'mint-ui';
Vue.component(Loadmore.name, Loadmore);

然后运行的时候可能会报错: Couldn’t find preset “es2015” relative to directory
由于是菜鸟没使用ES标准,而引入的vue-ueditor使用了ES标准,所以编译会报错,解决办法如下:

npm install babel-preset-es2015 --save-dev

然后 npm run dev 就运行成功啦。

2.实例

接下来我们在具体页面中写一个例子:

<template>
    <mt-loadmore :top-method="loadTop" @top-status-change="handleTopChange" ref="loadmore">
        <ul>
            <li v-for="item in list">{{ item }}</li>
        </ul>
        <!-- 下拉时显示的内容(加载中)  -->
        <div slot="top" class="mint-loadmore-top">
          <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>
          <span v-show="topStatus === 'loading'">Loading...</span>
        </div>
     </mt-loadmore>
</template>
<!-- 组件的模型 -->
<script>
  export default {
    data () {
        return {
           topStatus:'',
        }
    },
    methods:{
        loadTop(){
           //在你写完所要执行的方法后,一定一定要加上这句代码,这个是收回下拉动作的
            this.$refs.loadmore.onTopLoaded();
        },
        //下拉过程,加载过程,顶部状态的改变
        handleTopChange(status){
            this.topStatus = status;
        },
    }
  }
</script>

注意:mt-loadmore标签里的 ref=“loadmore”这个属性一定要加上,第一次写的时候我不小心没写,结果一直提示我loadmore报错。它里面的上拉加载更多,建议最好不要用,官网的例子执行不了,有bug,我在网上找过别人写的demo,修修改改可以用,就是稍微不注意改到哪还是执行不了,至今我都无解,而且可能还有无法预测的坑,总之不太建议用。也可能是我用得不对。

3.滚动加载更多

妈耶,这个我第一次写的时候感觉好麻烦,因为我页面里面有两个列表,是来回切换的,这两个列表都在滚动的内容里,要判断很多东西。。总之搞得我一头汗。今天先讲一下只有一个列表的情况。
1.首先,不要忘了引入需要的模块

//main.js

import { InfiniteScroll } from 'mint-ui';
Vue.use(InfiniteScroll);
<template>
    <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
      <li v-for="item in list">要循环的内容</li>
   </ul>
</template>
<!-- 组件的模型 -->
<script>
export default {
    data () {
        return {
            is_next_page:false,//是否有下一页
            scrollDisable:false,//禁止滑动(随便声明一个变量,等会儿要用到)
            loading: true //滚动的初始值,tru为不执行滚动加载
        }
    },
    methods:{
    //  注意,这个方法在页面刚进来的时候就会执行,所以我们设置loading的初始值为true,让它禁止执行这个方法
    //  scrollDisable这个变量是为了防止用户多次滚动操作,而反复执行加载的,所以设置这个变量,等到数据加载完再让它恢复能加载更多数据
      loadMore(){
        if (this.scrollDisable) {
          return;
        }
        this.scrollDisable = true;
        //执行加载更多的方法,请求成功后在恢复
        if(还有下一页){
            //请求数据,加载更多
            //这里写请求方法   
            //请求成功后:(一定要请求成功之后。观察是否有异步的问题,下面这两句代码一定要请求成功后)
             this.loading = false;
             this.scrollDisable = false;
        }else{
             this.loading = false;
             this.scrollDisable = false;
        }
      }
    },
    mounted(){
        //首次请求数据
        //这里写请求方法   (请求成功后,让loading=false,让滚动加载可以执行,如果这个写的有问题的话,就用下面watch的方法解决)
    },
    //我写的时候因为异步的原因,上面loading=false没有用,所以用这个方法解决
    //首先请求成功后,改变is_next_page的值,根据是否还有下一页,决定要不要让滚动加载的方法继续执行(如果没有下一页了,就没必要执行滚动加载了)
    watch:{
        is_next_page:function()(newValue, oldValue) {
            this.loading = !newValue;
        },
    }
}
</script>

在这里插入图片描述我自己写的时候,涉及到两个列表切换,然后都有滚动加载的功能,那个时候就需要判断更多的条件,但其实原理都是一样的,而且因为我写的请求是异步的,所以问题又比较麻烦点,同步的话就比较简单。只需要在每个请求数据成功后面加上改变loading的值或者scrollDisable 的值就可以了。

4.如果页面有两个列表可以切换,并且分别都有滚动加载的功能(请往下看)

虽然比较麻烦,但还是想总结一下记录下来,毕竟也比较常用,下面这个我用的是两个列表写在同一个滚动器里面的,不知道可不可以分开写,还没有试过,下次试一试。emmmmm,其实和上面的代码基本一样,那我就先复制一下代码,在上面代码的基础上进行增加。
那我们就写,一个列表是list,一个是arrays

<template>
    <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
      <li v-for="item in list" v-if="is_list">要循环的list内容</li>
      <li v-for="item in arrays" v-else>要循环arrays的内容</li>
   </ul>
</template>
<!-- 组件的模型 -->
<script>
export default {
    data () {
        return {
            is_list:true,//是否是list列表页
            is_next_page:false,//list是否有下一页
           a_isNext_page:false,//arrays是否有下一页
            scrollDisable:false,//list禁止滑动(随便声明一个变量,等会儿要用到)
            a_scrollDisable:false,//arrays禁止滑动(随便声明一个变量,等会儿要用到)
            loading: true //滚动的初始值,tru为不执行滚动加载
        }
    },
    methods:{
    //  注意,这个方法在页面刚进来的时候就会执行,所以我们设置loading的初始值为true,让它禁止执行这个方法
    //  scrollDisable这个变量是为了防止用户多次滚动操作,而反复执行加载的,所以设置这个变量,等到数据加载完再让它恢复能加载更多数据
      loadMore(){
          if(如果是list页){
              if (this.scrollDisable) {
                  return;
              }
              this.scrollDisable = true;
             if(还有下一页){
                  //请求数据,加载更多
                  //这里写请求方法   
                  //请求成功后:(一定要请求成功之后。观察是否有异步的问题,下面这两句代码一定要请求成功后)
                  this.loading = false;
                  this.scrollDisable = false;
               }else{
                   this.loading = false;
                   this.scrollDisable = false;
               }
          }else{
              //如果是arrays页
              if (this.m_scrollDisable) {
                  return;
              }
               this.m_scrollDisable = true;
               //执行加载更多的方法
                if(还有下一页){
                  //请求数据,加载更多
                  //这里写请求方法   
                  //请求成功后:(一定要请求成功之后。观察是否有异步的问题,下面这两句代码一定要请求成功后)
                  this.loading = false;
                  this.m_scrollDisable = false;
               }else{
                   this.loading = false;
                   this.m_scrollDisable = false;
               }
          }

        
      }
    },
    mounted(){
        //首次请求数据
        //这里写请求方法   (请求成功后,让loading=false,让滚动加载可以执行,如果这个写的有问题的话,就用下面watch的方法解决)
    },
    //我写的时候因为异步的原因,上面loading=false没有用,所以用这个方法解决
    //首先请求成功后,改变is_next_page的值,根据是否还有下一页,决定要不要让滚动加载的方法继续执行(如果没有下一页了,就没必要执行滚动加载了)
    watch:{
        is_next_page:function(newValue, oldValue) {
            if (this.is_list) {
                this.loading = !newValue;
            }
         },
        a_isNext_page:function(newValue, oldValue){
            if (!this.is_list) {
                this.loading = !newValue;
            }
        }
    }
}
</script>
Logo

前往低代码交流专区

更多推荐