mintUI的使用：

    1.找官网

    2.安装   npm install mint-ui -S         -S表示  --save

    3.引入mint Ui的css 和 插件

        import Mint from 'mint-ui';

        Vue.use(Mint);

        import 'mint-ui/lib/style.css'
        

    4.看文档直接使用。

在mintUi组件上面执行事件的写法

@click.native

<mt-button @click.native="sheetVisible = true" size="large">点击上拉 action sheet</mt-button>

1.使用action-sheet

官方文档不详细的控件，去github下载源码，进行使用，改进，然后集成

下载源码：

https://github.com/ElemeFE/mint-ui

这个目录下的就是示例代码：

https://github.com/ElemeFE/mint-ui/tree/master/example

举例使用：

<template>
  <div>
    <div>sheet组件</div>
    <br>
    <!--<action-sheet></action-sheet>-->
    <br>
    <mt-button @click.native="sheetVisible = true" size="large">点击上拉 action sheet</mt-button>
    <mt-actionsheet :actions="actions" v-model="sheetVisible"></mt-actionsheet>
  </div>
</template>

<script>
  //import actionSheet from './action-sheet'

  export default {
    name: "ActionSheetDemo",
    //components: {'actionSheet': actionSheet},
    data() {
      return {
        sheetVisible: false,
        actions: [],
      }
    },
    mounted() {
      this.actions = [{
        name: '拍照',
        method: this.takePhoto
      }, {
        name: '从相册中选择',
        method: this.openAlbum
      }];
      this.actions2 = [{
        name: '确定'
      }, {
        name: '返回上一步',
        method: this.goBack
      }];
    }
  }
</script>

<style scoped>

</style>

2.使用infinite-scroll上拉分页加载更多

加载本地信息+使用axios加载网络信息

<template>
  <div>
    <ul
      v-infinite-scroll="loadMoreNetWork"
      infinite-scroll-disabled="loading"
      infinite-scroll-distance="10" class="list">
      <!--<li v-for="item in list">{{ item }}</li>-->
      <li v-for="item in list">{{ item.title }}</li>
      <div>loading....</div>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "LoadMoreDemo",
    data() {
      return {
        list: [],
        loading: false,
        j: 0,
        page: 1,
        setTimeoutId: 0,
      }
    },
    methods: {
      //加载本地数据
      loadMore() {
        console.log('loadMore');
        this.loading = true;
        this.setTimeoutId = setTimeout(() => {
          for (let i = 1; i <= 20; i++, this.j++) {
            this.list.push('第' + this.j + "条");
          }
          this.loading = false;
        }, 1200);
      },
      loadMoreNetWork() {
        this.requestData();
      },
      requestData() {
        this.loading = true;
        /*请求数据的开关*/
        var api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=' + this.page;
        this.$axios.get(api).then((response) => {
          console.log(response.data)
          this.list = this.list.concat(response.data.result);
          ++this.page;
          /*每次请求完成page++*/
          //判断最后一页是否有数据
          if (response.data.result.length < 20) {
            this.loading = true;
            /*终止请求*/
          } else {
            this.loading = false;
            /*继续请求*/
          }
        })
          .catch((err) => {
            console.log(err)
          });
      },
    },
    mounted() {
      // this.requestData();
    },
    beforeDestroy() {
      // clearTimeout(this.setTimeoutId);
    },
  }
</script>

<style lang="scss" scoped>
  .list {
    li {
      height: 50px;
      line-height: 30px;
      /*background: red;*/
    }
  }
</style>