手机端上拉加载分页的数据，用vant -ui组件，并且有tab切

结构

<div>
        <van-tabs  @click="onClick">
          <van-tab
            v-for="item in sectionList"
            :title="item.sectionName"
            :name="item.sectionCode"
            :key="item.sectionCode"
          >
            <div  class="searchContentBox">
              <van-list
                v-model="loading"
                :finished="finished"
                loading-text="加载中..."
                :finished-text="finishedText"
                @load="onLoad"
                :offset="offset"
                :immediate-check="immediateCheck"
              >
                <div
                class="searchContent"
                v-for="(item,index) in resultList"
                :key="item.belongSectionCode+index"
              >
                  <p class="searchTitle" @click="searchDetail(item.announceId,item.belongSectionCode)">2020年元旦致辞</p>
                  <div class="keywordBox" v-if="item.contentKey1||item.contentKey2||item.contentKey3||item.contentKey4||item.contentKey5">
                    <span>关键字:</span>
                    <span v-html="item.contentKey1" ></span>
                    <span v-html="item.contentKey2" ></span>
                    <span v-html="item.contentKey3" ></span>
                    <span v-html="item.contentKey4" ></span>
                    <span v-html="item.contentKey5" ></span>
                  </div>
                  <div class="content" @click="searchDetail(item.announceId,item.belongSectionCode)">
                    {{item.contentSummary}}
                  </div>
                  <div class="viewCountBox">
                    <span class="view">{{item.viewCount}}</span>
                    <span class="downLoad">{{item.downloadCount}}</span>
                  </div>
                </div>
              </van-list>
            </div>
          </van-tab>
        </van-tabs>
      </div>

data里面定义的数据

data () {
    return {
      searchKey: '',
      pageNo: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      finished: false,
      immediateCheck: false,
      finishedText: '我是有底线的...',
      offset: 280,
      deviceList: [], // 调用接口获取的全部数据
      resultList: [], // 真正展示的数据，也就是筛选后的数据
      sectionList: [
        {
          belongSectionCode: '',
          sectionName: '全部',
          sectionSort: ''
        }
      ],
      belongSectionCode: '',
      activeName: '',
      inputSearchKey: ''
    }
  },

watch监听一下搜索框的数据

 watch: {
    'searchKey' (val) {
      this.inputSearchKey = val // 监听input值，赋值给替换的标签
      this.searchList()
    }
  },

点击tab切换

 // 版块点击事件
    onClick (name, title) {
      if (title === '全部') {
        this.pageNo = 1
        this.belongSectionCode = ''
      } else {
        this.pageNo = 1
        this.belongSectionCode = name
      }
      this.searchList()
    },

js逻辑

  // 搜索详情
    searchList () {
      if (!this.inputSearchKey && !this.searchKey) {
        Toast('请输入搜索内容！')
        return
      }
      if ((this.inputSearchKey && this.inputSearchKey.length > 0)) {
        return new Promise((resolve, reject) => {
          if (this.belongSectionCode === '') { // 全部的时候置空
            this.belongSectionCode = ''
          }
          const params = {
            searchKey: this.searchKey,
            pageNo: this.pageNo,
            limit: this.pageSize,
            belongSectionCode: this.belongSectionCode
          }
          announceList(params).then(res => {
            if (res.data.status === 0) {
              if (res.data.data.resultData.length === 0) {
                this.deviceList = []
                this.finishedText = '暂无数据'
              } else {
                this.finishedText = '我是有底线的...'
              }
              this.deviceList = this.pageNo === 1 ? res.data.data.resultData : this.deviceList.concat(res.data.data.resultData)
//这里一定要注意是  如果数据少于一页，也就是少于10条数据，那么就是接口返回几条就是几条res.data.data.resultData，假如数据返回来大于一页的数据，也就是大于10条数据，上拉加载更多必须把第一页的数据加进去，所以this.deviceList.concat(res.data.data.resultData)
              this.loading = false
              if (this.deviceList.length >= res.data.data.total) {
                this.finished = true
              } else {
                this.finished = false
                this.pageNo = this.pageNo + 1
              }
            } else if (res.data.status === -1) {
              this.Toast('请输入要搜索的内容！')
            } else {
              this.Toast(res.data.message)
            }
          }).then(() => {
            this.resultList = [] // 每次搜索对结果数组做初始化
            this.deviceList.forEach(item => { // 把初始数据进行遍历
              // 下面是把初始数据中的每一条数据的四个字段分别去和输入的内容进行匹配，如果某一字段中包含输入的内容，就往resultList中加
              if (item.announceName.indexOf(this.inputSearchKey) > -1 ||
                item.contentKey1.indexOf(this.inputSearchKey) > -1 ||
                item.contentKey2.indexOf(this.inputSearchKey) > -1 ||
                item.contentKey3.indexOf(this.inputSearchKey) > -1 ||
                item.contentKey4.indexOf(this.inputSearchKey) > -1 ||
                item.contentKey5.indexOf(this.inputSearchKey) > -1) {
                this.resultList.push(item)
              }
            })
            // 将得到的每一条数据中的每一个字段进行处理,brightKeyword就是变高亮的方法
            this.resultList.map(item => {
              item.announceName = this.brightKeyword(item.announceName)
              item.contentKey1 = this.brightKeyword(item.contentKey1)
              item.contentKey2 = this.brightKeyword(item.contentKey2)
              item.contentKey3 = this.brightKeyword(item.contentKey3)
              item.contentKey4 = this.brightKeyword(item.contentKey4)
              item.contentKey5 = this.brightKeyword(item.contentKey5)
            })
          }).catch((err) => {
            reject(err)
          })
        })
      }
    },
    // 根据搜索高亮
    brightKeyword (val) {
      const keyword = this.inputSearchKey // 获取输入框输入的内容
      if (val.indexOf(keyword) !== -1) { // 判断这个字段中是否包含keyword
        return val.replace(keyword, `<font color="#FF584F">${keyword}</font>`)
      } else {
        return val
      }
    },
    onLoad () {
      this.searchList()
    },