bn-q-icon/components/en-list/en-list.vue

<template>
  <view class="list">
    <Blank v-if="list.length<=0"></Blank>
    <view class="scroll-view" v-else>
      <scroll-view class="scroll-list" scroll-y="true" style="height: 100%;" @scrolltolower="onReachScollBottom"
                   :scroll-top="scrollTop" @scroll="scroll">
        <slot name="listInfo" v-bind:pagingData="list"></slot>
        <view class="toMore" v-show="isAjax">{{$t('list.load')}}-----</view>
      </scroll-view>
    </view>

  </view>
</template>

<script>
import Blank from 'components/en-utils/en-blank/en-blank'

export default {
  components: {Blank},
  data() {
    return {
      list: [],
      scrollTop: 0,
      page: 1,
      total: null,
      isAjax: false,
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    scroll: function (e) {
      this.scrollTop = e.detail.scrollTop
    },
    onReachScollBottom() {
      if (this.isAjax || this.list.length === this.total) {
        return
      }
      this.getList()
    },
    getList() {
      this.isAjax = true
      this.$emit('getList', this.page)
    },
    startList() {
      this.list = []
      this.page = 1
      this.scrollTop = 0
      this.isAjax = false
      this.getList()
    },
    setList(list, total) {
      list.forEach((item) => {
        this.list.push(item)
      })
      this.total = total
      this.isAjax = false
      ++this.page;
    }

  },
}
</script>

<style scoped lang="scss">
.list {
  height: 100%;

  .scroll-view {
    flex: 1;
    overflow: auto;

    .scroll-list {
      width: 100%;
      max-height: 100vh;
    }
  }

  .toMore {
    color: #999;
    font-size: 20rpx;
    margin: 25rpx 0;
    text-align: center;
  }

  ::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    background-color: transparent;
  }


}
</style>