搜索中心 (四) 02-搜索结果-上拉加载

搜索结果-上拉加载

• 封装API src/api/article.js

/**
 * 根据搜索关键字查询文章列表
 * @param {Integer} param.page - 页码
 * @param {Integer} param.page - 每页多少条
 * @param {String} param.page - 搜索关键字
 */
export const searchArticles = ({ page = 1, perPage = 20, q }) => {
  return request('/app/v1_0/search', 'get', {
    page,
    per_page: perPage,
    q
  })
}

src/views/search/result.vue

script里导入词条

import {searchArticles} from ‘@/api/article’

• 申明数据

   data () {
    return {
      upLoading: false,
      finished: false,
      reqParams: {
        page: 1,
        q: this.$route.query.q
      },
        //文章列表
      articles: []
    }
  },

• 获取数据

created（）{
//按理这个位置获取数据但是van-1ist组件默认会加载数据触发onload
}，

methods: {
    async onLoad () {
      await this.$sleep()
      // 获取数据 完成渲染
      const data = await searchArticles(this.reqParams)
      this.articles.push(...data.results)
      // 清除上拉效果
      this.upLoading = false
      // 判断所有数据是否加载完成  数据有长度
      if (data.results.length) {
        // 把下一页的页码 设置好
        this.reqParams.page++
      } else {
        this.finished = true
      }
    }
  }

• 渲染组件

<!-- 同效传递方式写法  {name:'article',params:{id:item.art_id}} -->
        <van-cell @click="$router.push(`/article/${item.art_id}`)" v-for="item in articles" :key="item.art_id.toString()">
          <div class="article_item">
            <h3 class="van-ellipsis">{{item.title}}</h3>
            <div class="img_box" v-if="item.cover.type===3">
              <van-image class="w33" fit="cover" :src="item.cover.images[0]" />
              <van-image class="w33" fit="cover" :src="item.cover.images[1]" />
              <van-image class="w33" fit="cover" :src="item.cover.images[2]" />
            </div>
            <div class="img_box" v-if="item.cover.type===1">
              <van-image class="w100" fit="cover" :src="item.cover.images[0]"/>
            </div>
            <div class="info_box">
              <span>{{item.aut_name}}</span>
              <span>{{item.comm_count}}评论</span>
              <span>{{item.pubdate|relTime}}</span>
            </div>
          </div>
        </van-cell>