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

1、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官網引入須要的效果，根據提示進行操做便可

 

2、API（application programming interface）

api （應用程序編程接口）

API（Application Programming Interface,應用程序編程接口）是一些預先定義的函數，目的是提供應用程序與開發人員基於某軟件或硬件得以訪問一組例程的能力，而又無需訪問源碼，或理解內部工做機制的細節。

3、下拉加載(利用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"])

           },