select 滚动分页查询

问题：微信提供的查询模板标题的接口是强制要求分页查询的，前端可以实现下拉框的滚动分页查询吗？

知识点：vue的自定义指令

参考链接：
https://blog.csdn.net/qq_33788674/article/details/123228587
https://blog.csdn.net/weixin_45170586/article/details/129500458

解决方案如下：

<template>
  <div>
    <Form ref="popupFormRef" :model="popupForm" :rules="popupFormRules" :label-width="120">
      <FormItem label="模板标题" prop="tid">
        <Select v-model="popupForm.tid" placeholder="请选择模板标题" v-loadmore="loadMoreTableData"
          @on-change="templateTitleChange" label-in-value>
          <Option v-for="item in tableDataList" :value="item.tid" :key="item.tid">{{ item.title }}</Option>
        </Select>
      </FormItem>
    </Form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageIndex: 1, //当前页
      pageCount: 1, //总数
      pageSize: 10, //每页显示页数
      tableData: [], //通过接口获取到列表数据
      tableDataList: [], //计算后要展示的列表数据
    }
  },
  // 自定义指令
  directives: {
    loadmore: {
      bind: function (el, binding) {
        // 获取iview-ui定义好的scroll盒子
        const selectWrap = el.querySelector('.ivu-select-dropdown')
        selectWrap.addEventListener('scroll', function () {
          /*
          * scrollHeight 元素标签内容高度
          * scrollTop 获取元素滚动的偏移值,
          * clientHeight 元素标签的可见高度
          * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
          * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
          */
          let sign = 100
          const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
          if (scrollDistance <= sign) {
            binding.value()
          }
        })
      }
    }
  },
  methods: {
    loadMoreTableData() {
      this.pageIndex++
      this.getTableData(this.pageIndex);
    },
    getTableData(pageIndex) {
      console.log(pageIndex)
      let { pageCount, pageSize, tableData } = this
      console.log(pageCount, pageSize, tableData)
      if (pageCount <= pageSize) {
        return
      } else {
        let pageIndexs = Math.ceil(pageCount / pageSize)
        if (pageIndex > pageIndexs) {
          pageIndex = pageIndexs
          return
        }
        let start = (pageIndex - 1) * pageSize
        let end = pageIndex * pageSize
        this.getTemplateTitleList(start)
      }
    },
    getTemplateTitleList(start) {
      let param = {
        start: start || 0,
        limit: 10,
      }
      getPubTemplateList(param).then(res => {
        console.log(res)
        if (res.ret == '00000') {
          this.tableData = res.data.list
          this.pageCount = res.data.count
          this.tableDataList.push(...this.tableData)
        }
      })
    },
  },
}
</script>

<style></style>