quickapp_front/src/views/Catalog/index.ux

<template>
  <list id="catalog" class="catalog-wrap" @scrollbottom="loadCatalog" @scrolltop="loadPrev">
    <block for="list">
      <list-item type="catalog-item" class="catalog-item" @click='jumpReader($item)'>
        <text class="catalog-name {{$idx == chapter_sequence_index ? 'catalog-name__check' : ''}}">{{$item.chapter_name}}</text>
        <div class="target-wrap">
          <image if='$item.chapter_is_vip==1' src="../../assets/imgs/book-vip.png"></image>
          <text class="border {{$idx == chapter_sequence_index ? 'border-show': ''}}"></text>
        </div>
      </list-item>
    </block>
  </list>
</template>

<script>
import { getCatalog } from "../../api";
import router from '@system.router';
import prompt from '@system.prompt'

export default {
  protected: {
    bid: "",
    chapter_sequence: ""
  },
  private: {
    list: [],
    meta: {},
    chapter_sequence_index: 0,
    startpage: 1,
  },
  onInit() {
    let page = 1
    var chapter_sequence_index = 0
    if (this.chapter_sequence) {
      var chapter_sequence = this.chapter_sequence
      chapter_sequence_index = chapter_sequence % 15 - 1
      this.chapter_sequence_index = chapter_sequence_index
      page = Math.ceil(chapter_sequence / 15)
    }
    this.startpage = page
    getCatalog({ bid: this.bid, page: page }).then(r => {
      this.list = r.list
      this.meta = r.meta
      this.$element('catalog').scrollTo({ index: chapter_sequence_index })
    })
    // this.list = Array(100).fill(null).map((_, k) => k);
    // setTimeout(() => {
    //   this.$element('catalog').scrollTo({ index: 20 });
    // }, 1000);
  },
  jumpReader(info) {
    console.log(info)
    router.push({
      uri: "/views/Reader",
      params: {
        bid: info.bid,
        chapter_id: info.chapter_id
      }
    })
  },
  loadCatalog() {
    console.log("load data");
    if (this.meta.last_page < (this.meta.current_page + 1)) return prompt.showToast({ message: '已经到底啦' })
    getCatalog({ bid: '5pNo6A7wqQmB1WgQygDjkOM9VZn2vXeY', page: this.meta.current_page + 1 }).then(r => {
      console.log(...r.list)
      this.list.push(...r.list)
      this.meta = r.meta
    })
  },
  loadPrev() {
    console.log("get prev catalog");
    if ((this.startpage - 1) < 1) return prompt.showToast({ message: '已经到顶啦' })
    getCatalog({ bid: '5pNo6A7wqQmB1WgQygDjkOM9VZn2vXeY', page: this.startpage - 1 }).then(r => {
      console.log(...r.list)
      this.list.unshift(...r.list)
      this.startpage = r.meta.current_page
    })
  }
}
</script>

<style lang="less">
@import "../../assets/less/catalog.less";
</style>