Js framework, because with other packages, in fact, with less than so many functions, are embarrassed to use package -_- — all the code has a note

data

data () {
    // Since there are three tabs here, we define a loop first, which is mainly to change the text and pass the parameter when switching,
   // If you only have one list, ignore it
    const tabList = [
      {
        text: 'Income of the month'.img: 'monthIncome'.rankType: 1.dateType: 1}, {text: 'Gross income'.img: 'totalIncome'.rankType: 2.dateType: 2}, {text: 'Top speed'.img: 'highSpeed'.rankType: 3.dateType: 3,},]// The size is fixed. In order to change the size once, you can change the size everywhere
    const size = 2
    return {
      tabList,
      currentIndex: 0.rankList: [].// Data list
      size,
      rankParams: {
        rankType: 1.dateType: 1.page: 1,
        size,
      },
      more: true.// Is there any paged data left
      total: 0.// Total number of entries
      triggerDistance: 10.// Scroll load threshold
      isLastData: false.// Is it the last page}},Copy the code

template

@click=”changeRankType(item,index)”

 <div v-for="(item,index) in tabList"  :key="index" @click="changeRankType(item,index)">
    <img 
        class="month-income"
        :src="require(`@/assets/image/starMine/${item.img}.png`)"
    >    
 </div>
Copy the code

List code

<div class="ranking-list-bg">
  <div class="ranking-list" ref="rankingRef" @touchend="touchEnd">
    <div class="ranking-list-info" v-for="(item,index) in rankList" :key="index">
      <commonItem
        :currentIndex="currentIndex"
        :index="index"
        :is-mine="false"
        :user-info="item.user"
        :user-value="item.value"
      />
    </div>
    <! -- Last one -->
    <div v-show="this.rankParams.page ! == 1 && isLastData"  class="rank-last-data">
      <div class="rank-last-data-line"></div>
      <div class="rank-last-data-text">What ~</div>
    </div>
  </div>
</div>
Copy the code

The most important thing here is ref=”rankingRef” @ touchEnd =”touchEnd”, which we’ll use later

methods && mounted

 async mounted () {
    this.getRankingList()
  },
  methods: {
    async getRankingList () {
        const { ranks, total } = await getMineRankApi(this.token, this.rankParams)
        // Data is pushed into each pull-down
        this.rankList.push(... ranks)// Get the total number of entries
        this.total = total
        // If the current number of pages is less than or equal to (total pages/number of pages), it can still be loaded, otherwise, it cannot
        this.more = this.rankParams.page <= (this.total / this.rankParams.size)
        // When the number of pages is greater than or equal to (total pages/number of pages), it can indicate the end of the page
        if (this.rankParams.page >= +(this.total / this.rankParams.size)) {
          this.isLastData = true}},/ / switch TAB
    changeRankType ({ rankType, dateType }, index) {
      // Because the three tabs are actually using the same interface, the page and size must be reset to dynamically write other parameters
      // Whether to reset to false after all must be set
      // The list must be reset to an empty array
      this.currentIndex = index
      this.isLastData = false
      this.rankParams = {
        rankType,
        dateType,
        page: 1.size: this.size,
      }
      this.rankList = []
      this.getRankingList()
    },
    touchEnd () {
      // If the number of pages cannot exceed the total number,return
      if (!this.more) {
        return
      }
      // Element content vertical scrolling height + element visual height + threshold > all height of the element (roll up + visual)
      if (this.$refs.rankingRef.scrollTop 
      +this.$refs.rankingRef.offsetHeight
      + this.triggerDistance > this.$refs.rankingRef.scrollHeight) {
        this.rankParams.page += 1
        this.getRankingList()
      }
    },
  },
Copy the code

See scrollTop offsetHeight scrollHeight

I think the most important thing here is when do you slide? ScrollTop = scrollTop + offsetHeight = scrollTop + offsetHeight = scrollTop + offsetHeight ScrollHeight, which means I’ve slipped to the very bottom, but I can’t slide only to the very bottom, so I’m going to add a threshold, give it a sliding interval.

ScrollTop = 0 when I’m not scrolling,scrollTop + offsetHeight < scrollHeight when THERE’s no pagination but the element goes beyond one screen

The higher the threshold, the higher the load can be to the next page

css

.ranking-list {
   height: 900px; // It is better to give a height hereoverflow: scroll;
}
Copy the code

The effect