介绍

包含业务封装的列表组件, 例如上下拉刷新, 错误页等. 内部对数据的拼接做了封装, 支持快速对接接口数据

图示

代码演示

//template
//实现handleRequest方法, 当手动上拉下拉时会被调用
<fg-list ref="list" @handleRequest="request">
  <template slot-scope="slot">
    //card为cell内的卡片, slot.data为setData时的data数据
    <card :data="slot.data"/>
  </template>
</fg-list>
//script
request(){
  this.request(nextId, (res) => {
    //给list设置数据(请求状态,集合数据,下一页id,失败时的错误提示)
    //设置完成后页面就会显示
    this.$refs.list.setData(res.ok, res.data, res.nextId, res.message)
  })
},
begingRefresh(){
  //开始刷新
  this.$refs.list.beginRefresh()
}

注: vue中v-for要求元素必须绑定唯一key, 所以setData方法中传递的data数据必须包含id字段, 且id唯一

//script
request(){
  this.request(nextId, (res) => {
    //res.data中必须包含id字段[{id:'1'},{id:'2'},{id:'3'}]
    this.$refs.list.setData(res.ok, res.data, res.nextId, res.message)
  })
}

API

Demo

fg-list-demo

开发方案

链接