lcoco/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="listStyle" @scrolltolower="onReachScollBottom"
                   :scroll-top="scrollTop" @scroll="scroll">
        <slot name="listInfo" v-bind:pagingData="list"></slot>
        <view class="toMore" v-show="isAjax">加载中...</view>
      </scroll-view>
    </view>

  </view>
</template>

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

export default {
  components: {Blank},
  props:{
    'height':{
      default:''
    },
    'isAll':{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {
      list: [],
      scrollTop: 0,
      page: 1,
      total: null,
      isAjax: false,
      listStyle:{
        'height':'calc(100vh - env(safe-area-inset-bottom))'
      }
    }
  },
  watch: {
    'height':function (){
      this.setHeight()
    },
    'isAll':function () {
      this.setHeight()
    }
  },
  mounted() {
    this.getList()
    this.setHeight()
  },
  methods: {
    setHeight(){
      if(this.isAll){
        this.listStyle.height='100vh'
      }else {
        if(this.height){
          if(this.height>0){
            this.listStyle.height='calc(100vh - env(safe-area-inset-bottom) - '+this.height+'rpx)'
          }else if(this.height<0){
            this.listStyle.height='calc(100vh - env(safe-area-inset-bottom) + '+(this.height*-1)+'rpx)'
          }
        }
      }
    },
    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
    },
    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>