1.index.html

<!-- 引入mint-ui -->
<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
<script src="https://unpkg.com/mint-ui/lib/index.js"></script>

2.vue.config.js

configureWebpack: {
        externals: {
            'mint-ui': 'MINT',
        }
}

3.使用PopupDemo.vue

<style lang="scss" scoped>
  .infiniteScrollDemo {
    text-align: center;
    .loading {
      display: flex;
      .loading-icon {
        padding-top: 10px;
        margin: 0 auto;
      }
    }
    .market-money {
      color: blue;
      padding: 15px;
      width: 200px;
      border-radius: 8px;
      padding: 10px;
      -webkit-transform: translate(-50%);
      transform: translate(-50%);
      left: 50%;
      position: fixed;
      background: #fff;
      font-size: 20px;
      color: #26a2ff;
    }
  }
</style>
<template>
  <div class="infiniteScrollDemo">
    <ul v-infinite-scroll="loadMore"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="10"
        class="page-infinite-list">
      <li v-for="item in list"
          class="page-infinite-listitem"
          @click="testPopup">{{ item }}</li>
      <mt-popup v-model="popupVisible"
                popup-transition="popup-fade">
        <div class="market-money">股市基金</div>

      </mt-popup>
    </ul>
    <div v-if="loading"
         class="loading">
      <div class="loading-icon">
        <mt-spinner type="fading-circle"
                    color="#26a2ff"
                    class="loading-icon"></mt-spinner>
        <div>加载中</div>
      </div>
    </div>
    <div v-if="showEnd">我是有底线的</div>
  </div>
</template>

<script>
  import { InfiniteScroll, Spinner, Popup } from 'mint-ui';
  export default {
    data() {
      return {
        list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
        loading: false,
        showEnd: false,
        popupVisible: false
      };
    },
    name: 'infiniteScrollDemo',
    methods: {
      loadMore() {
        this.loading = true;
        if (this.list.length < 50) {
          setTimeout(() => {
            let last = this.list[this.list.length - 1];
            for (let i = 1; i <= 10; i++) {
              this.list.push(last + i);
            }
            this.loading = false;
          }, 1000);
        } else {
          this.loading = false;
          this.showEnd = true;
        }

      },
      testPopup() {
        this.popupVisible = true
      }
    }
  }
</script>

 

Logo

前往低代码交流专区

更多推荐