Virtual list – unlimited scrolling

During the project, there was a list page that generated so much data that the list would become stagnant. So I asked Baidu again and said two things

1. Contour list
2. Unequal height list

What I’m going to talk about here is the second kind of unequal height list, and it loads data dynamically

The following is a rough implementation of the display

What if it does? In the code

WXML code

<scroll-view class="lsmap" id="screenSee" scroll-y bindscrolltolower="bindscrolltolower" bindscroll="bindscroll">
    <view style="height: {{ headerHeight }}px;"></view>
    <view wx:for="{{pageList}}" wx:if="{{item.visible}}" wx:key="index" id="listPageId{{index}}">
      <faqsItem canCtl="{{false}}"  wx:for="{{item.data}}" wx:key="id" wx:for-item="qItem"
        wx:for-index="qIndex" bind:ctlClick="showCtlModal" bind:getPhoneNumber="itemGetPhoneNumber" phone="{{phone}}"
        accessToken="{{accessToken}}" itemData="{{qItem}}" data-item="{{qItem}}" data-index="{{index}}"
        data-qindex="{{qIndex}}">
      </faqsItem>
    </view>
    <view style=" height: {{bottomHeight}}px;"></view>
    <empty isEmpty="{{isEmpty}}" noMore="{{noMore}}"></empty>
  </scroll-view>
Copy the code

Js code

Page({

  /** * initial data for the page */
  data: {
    current: 1.size: 10.content: ' '.newsLs: [].// List of articles
    isLoading: false./ / load
    isEmpty: false./ / empty
    noMore: false.// No more

    headerHeight: 0.bottomHeight: 0.pageList: [// Every page of data
      / / {
      // data: [],// data
      // visible: false,// whether to display currently
      // }].pageHeight: [// Each page height
      / / {
      // top: 0, // The height of the top in scroll
      // height: 0, //
      // Bottom :0, // The height of the bottom scroll
      // }].scrollH: 0.// Scroll box height
  },


  /** * lifecycle function - listen for the page to complete the first rendering */
  onReady: function () {
    this.getListData();
    const query = wx.createSelectorQuery();
    query.select('#screenSee').boundingClientRect().exec((res) = > {
      this.setData({
        scrollH: res[0].height
      })
    })
  },

  /** * lifecycle function -- listens for page display */
  onShow: function () {},/** * life cycle function - listen for page hiding */
  onHide: function () {},// Roll to bottom
  bindscrolltolower() {
    if (!this.data.noMore) {
      this.getListData()
    }
  },

  / / rolling
  bindscroll(e) {
    // Implement a virtual list
    let pageList = this.data.pageList, headerHeight = this.data.headerHeight, bottomHeight = this.data.bottomHeight;
    this.data.pageHeight.forEach((item, index) = > {
      // Slide your finger up
      if (e.detail.deltaY < 0 && item.bottom < floatObj.subtract(e.detail.scrollTop, 10) && pageList[index].visible && pageList[index + 2]) {
        // Hide the header
        pageList[index].visible = false;
        headerHeight += item.height;
        // Display the bottom
        if(! pageList[index +2].visible) {
          pageList[index + 2].visible = true;
          bottomHeight -= this.data.pageHeight[index + 2].height
        }
        this.setData({
          pageList: pageList,
          headerHeight: headerHeight,
          bottomHeight: bottomHeight
        })
      }

      // Slide your finger down
      if (e.detail.deltaY > 0 && item.top > floatObj.add(e.detail.scrollTop, floatObj.add(this.data.scrollH, 10)) && pageList[index].visible == true && pageList[index - 2]) {

        // Hide the header
        pageList[index].visible = false;
        bottomHeight += item.height;

        if(! pageList[index -2].visible) {
          // Display the bottom
          pageList[index - 2].visible = true;
          headerHeight -= this.data.pageHeight[index - 2].height
        }

        this.setData({
          pageList: pageList,
          headerHeight: headerHeight,
          bottomHeight: bottomHeight
        })
      }
    })
  },

  // Search for input
  searchInput(e) {
    this.setData({
      content: e.detail.value,
    })
  },

  / / search
  getListData() {
    if (this.data.isLoading) return
    // Get list data
    getqList().then(res= > {
      if (res.code == 200) {
        let tampParam = {}
        let tempLs = res.data.records.map(el= > {
          if (el.content) {
            el.content = JSON.parse(el.content)
          } else {
            el.content = []
          }
          return el
        });
        if (res.data.records.length < this.data.size) {
          tampParam = {
            current: this.data.current + 1.isEmpty: this.data.current == 1 && res.data.records.length == 0 ? true : false.noMore: true.newsLs: this.data.newsLs.concat(res.data.records)
          }
        } else {
          tampParam = {
            current: this.data.current + 1.newsLs: this.data.newsLs.concat(res.data.records)
          }
        }

        if (res.data.records.length > 0) {
          let pageList = this.data.pageList, pageHeight = this.data.pageHeight;

          pageList.push({
            data: res.data.records,/ / data
            visible: true.// Whether to display
          })

          pageHeight.push({
            top: 0.// The height of the top in scroll
            height: this.data.virtualHeight, / / height
            bottom: this.data.virtualHeight, // The height of the bottom in scroll
          })
          tampParam.pageList = pageList
          tampParam.pageHeight = pageHeight
        }
        this.setData(tampParam)
        if (res.data.records.length > 0) {
          setTimeout(() = > {
            this.initPageHeight(this.data.current - 2)},0); }}})},// Initialize the home page height
  initPageHeight(index) {
    const query = wx.createSelectorQuery();
    query.select(`#listPageId${index}`).boundingClientRect().exec((res) = > {
      let pageHeight = this.data.pageHeight;
      pageHeight[index] = {
        top: index > 0 ? pageHeight[index - 1].bottom + 1 : 0.// The height of the top in scroll
        height: res[0].height,
        bottom: index > 0 ?
          floatObj.add(pageHeight[index - 1].bottom + 1, res[0].height)
          : res[0].height, // The height of the bottom in scroll
      }
      this.setData({
        pageHeight: pageHeight
      })
    })
  },

})
Copy the code

Here’s part of the code. Need source code please pay attention to the public number “BWeb” or scan the qr code below, and then reply to “wechat small program virtual list”