搜索列表（二）-获取商品列表接口动态数据 & 加载更多

搜索列表加载更多

• 控制加载更多

async loadData () {
  // 获取列表数据
  let res = await request('goods/search', {
      //参数
    query: this.kw,
      // 页码
    pagenum: this.pagenum,
    pagesize: this.pagesize
  })
  // 如果要处理分页，数据需要进行累加
  this.list = [...this.list, ...res.goods]
  this.total = res.total
}

onReachBottom () {
  // 监控小程序页面的触底操作
  // 加载下一页数据
  if(this.list.length >= this.total) {
    // 数据加载完成
    this.isFinished = false
    return
  }
  // 页码累加操作
  this.pagenum = this.pagenum + 1
  this.loadData()
}

完整实例

结构

<!-- 商品列表 -->
    <div class="goods-list">
      <navigator :url="'/pages/goods_detail/main?gid=' + item.goods_id" class='goods-item' :key='item.goods_id' v-for='item in list'>
        <img :src="item.goods_small_logo" mode="aspectFill"/>
        <div class="goods-right">
          <h4>
            {{item.goods_name}}
          </h4>
          <div class="price">
            <span>￥</span>{{item.goods_price}}
          </div>
        </div>
      </navigator>
    </div>

方法-获取列表接口数据

//  先导入接口方法
import request from '../../utils/request.js'
export default {
  data () {
    return {
        //参数
      kw: '',
      tabData: ['综合', '销量', '价格'],
        //默认为  0页
      currentIndex: 0,
      // 当前请求的数据页码
      pagenum: 1,
      // 没页显示多少条
      pagesize: 5,
      // 查询结果，默认为空数组
      list: [],
      // 列表总数  默认为0
      total: 0,
      // 判断数据是否加载完成
      isFinished: true,
      // 接口调用的状态为
      isLoading: false
    }
  },
  methods: {
      async loadData () {
      // 获取列表数据
      let res = await request('goods/search', {
          //参数
        query: this.kw,
          // 页码
        pagenum: this.pagenum,
          //每页几条
        pagesize: this.pagesize
      })
       // console.log(res)  
      // 接口数据的获取
      this.list = res.goods
          //列表总数
      this.total = res.total
     },
     handleChange (e) {
      // 控制选项卡切换
      this.currentIndex = e.target.dataset.index
    },
   onLoad (param) {
    // 页面跳转路由参数的获取
    // 重新加载页面是，要保证所有的数据进行重置
    this.pagenum = 1
    this.list = []
    this.isLoading = false
    this.isFinished = true
    // 页面跳转路由参数的获取
    this.kw = param.kw
    //页面加载时  触发请求
    this.loadData()
  }
}

打印res数据

每页5条

展示商品列表

结构

列表显示

商品列表-加载更多提示

  <!-- 商品列表 -->
    <div class="goods-list">
      <navigator :url="'/pages/goods_detail/main?gid=' + item.goods_id" class='goods-item' :key='item.goods_id' v-for='item in list'>
        <img :src="item.goods_small_logo" mode="aspectFill"/>
        <div class="goods-right">
          <h4>
            {{item.goods_name}}
          </h4>
          <div class="price">
            <span>￥</span>{{item.goods_price}}
          </div>
        </div>
      </navigator>
    </div>
    <!-- 加载更多提示 -->
    <div class="more" v-if='isFinished'>加载更多...</div>

图例