mint-Ui库 API（2018/12/3）

一、mint-UI

①安装 cnpm i mint-ui --save

②引入 Mint UI

   在 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 }

})

以上代码便完成了 Mint UI 的引入。需要注意的是，样式文件需要单独引入

 

③在mint-UI官网引入需要的效果，根据提示进行操作即可

 

二、API（application programming interface）

api （应用程序编程接口）

API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

三、下拉加载(利用mint-UI中的 infinite-scroll 无限滚动指令实现)

11.30随堂总结/p3/page/index.vue

<!--新闻列表-->

           <ul   v-infinite-scroll="loadMore"  

                       infinite-scroll-disabled="loading"

                       infinite-scroll-distance="10">  <!--当与下方距离10以内的时候触发loadmore  第二个是无限滚动是否关闭，靠布尔值决定-->

                       

                <li v-for="item in list" class="newspart">

                      <div>

                           <h3>{{item.title}}</h3>

                           <p class="sor">{{item.source}}</p>

                      </div>

                      <div>

                      <img v-bind:src="item.picInfo[0].url">

                      </div>

                </li>

           </ul>

methods:{

                loadMore(){ //发送继续加载数据的请求

                     this.getData()

                     console.log("loadMore")

                },

                ...mapActions(["getData"])

           },