ztb-saas-mini/components/virtual-list/index.js

const util = require('../../utils/util')
const math = require('../../utils/math')

Component({
  /**
   * 组件样式隔离
   */
  options: {
    addGlobalClass: true,
    multipleSlots: true // 支持多个slot
  },
  properties: {
    height: {
      type: Number,
      value: 800
    },
    threshold: { // 下拉刷新阈值，下拉距离超过该值触发刷新
      type: Number,
      value: 30
    },
    loading: {
      type: Boolean,
      value: true,
      observer(value) {
        if(value){
          this.reset()
        }
      }
    },
    finished: {
      type: Boolean,
      value: false
    },
    text: {
      type: String,
      value: '到底啦～'
    },
    size: {
      type: Number,
      value: 15
    },
    pageList: {
      type: Array,
      value: [],
      observer(value) {
        if (!Array.isArray(value)) {
          return
        }
        this.setList(value[0])
      }
    }
  },
  lifetimes: {
    ready: function() {
      const query = wx.createSelectorQuery().in(this)
      query.select('#scrollview').boundingClientRect().exec((res) => {
        this.data.scrollH = res[0].height
      })
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    current: 1,
    headerHeight: 0,
    bottomHeight: 0,
    // pageList: [], // 每一页数据
    visiblist: [], // visible: false,// 当前是否显示
    pageHeight: [], // 每一页高度
    scrollH: 0,// 滚动框高度
    requesting: false
  },
  /**
   * 组件的方法列表
   */
  methods: {
    reset: function(){
      this.setData({ current: 1, loading: true, finished: false, headerHeight: 0, bottomHeight: 0, pageList: [], pageHeight: [] })
    },
    setList: function(listData){
      this.data.requesting = false
      if (!Array.isArray(listData)) {
        return
      }
      if (listData.length < this.data.size) {
        this.data.finished = true
      }
      this.data.current = this.data.current + 1
      if (Array.isArray(listData) && listData.length > 0) {
        let pageHeight = this.data.pageHeight, visiblist = this.data.visiblist;
        let nowList = `pageList[${this.data.pageList.length - 1}]`
        visiblist.push(true)
        pageHeight.push({
          top: 0, // 顶部在scroll里的高度
          height: this.data.virtualHeight, // 高度
          bottom: this.data.virtualHeight, // 底部在scroll里的高度
        })
        this.data.pageHeight = pageHeight
        this.setData({ [nowList]: listData, visiblist, finished: this.data.finished })
        console.log(this.data.pageList.length)
        console.log(visiblist.length)
        console.log(this.data.pageHeight.length)
        this.initPageHeight(this.data.current - 2)
      }
    },
    // 初始化首页高度
    initPageHeight: function(index) {
      const query = wx.createSelectorQuery().in(this)
      query.select(`#listPageId${index}`).boundingClientRect().exec((res) => {
        let pageHeight = this.data.pageHeight;
        pageHeight[index] = {
          top: index > 0 ? pageHeight[index - 1].bottom + 1 : 0, // 顶部在scroll里的高度
          height: res[0].height,
          bottom: index > 0 ? math.plus(pageHeight[index - 1].bottom + 1, res[0].height) : res[0].height // 底部在scroll里的高度
        }
        this.data.pageHeight = pageHeight
      })
    },
    bindscroll: util.throttle(function (e) {
      // 实现虚拟列表
      let pageList = this.data.pageList
      let visiblist = this.data.visiblist
      let headerHeight = this.data.headerHeight
      let bottomHeight = this.data.bottomHeight
      this.data.pageHeight.forEach((item, index) => {
        // 手指上滑
        if (e.detail.deltaY < 0 && item.bottom < math.minus(e.detail.scrollTop, 10) && visiblist[index] && pageList[index + 2]) {
          // 隐藏头部
          visiblist[index] = false;
          headerHeight += item.height;
          // 显示底部
          if (!visiblist[index + 2]) {
            visiblist[index + 2] = true;
            // console.log('index>>>' + index)
            // console.log(pageList.length)
            // console.log(visiblist.length)
            // console.log(this.data.pageHeight.length)
            bottomHeight -= this.data.pageHeight[index + 2].height
          }
        }
        // 手指下滑
        if (e.detail.deltaY > 0 && item.top > math.plus(e.detail.scrollTop, math.plus(this.data.scrollH, 10)) && visiblist[index] == true && pageList[index - 2]) {
          // 隐藏头部
          visiblist[index] = false;
          bottomHeight += item.height;
          if (!visiblist[index - 2]) {
            // 显示底部
            visiblist[index - 2] = true;
            headerHeight -= this.data.pageHeight[index - 2].height
          }
        }
      })
      this.setData({ visiblist, headerHeight, bottomHeight })
    }, 100),
    scrolltolower: function(){
      if (this.data.requesting || this.data.finished) {
        return
      }
      this.data.requesting = true
      this.triggerEvent('loadmore')
    }
  }
})