single-list.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. <template>
  2. <view class="single-list">
  3. <slot name="items" v-bind:list="list"></slot>
  4. </view>
  5. </template>
  6. <script>
  7. const TAG_NAME = "SINGLE_LIST";
  8. export default {
  9. props: {
  10. //请求数据
  11. sendData:{
  12. type:Object,
  13. default:()=>({})
  14. },
  15. //请求地址
  16. url:{
  17. type:String,
  18. default:''
  19. }
  20. },
  21. data() {
  22. return {
  23. loadingType:'more',
  24. pageNum:1,
  25. pageSize:20,
  26. list:[],
  27. }
  28. },
  29. watch:{
  30. /*onLoad内必须在this.$nextTick更改*/
  31. sendData:{
  32. handler(v,o){
  33. // console.log(TAG_NAME,'sendData',v,o);
  34. this.getList(true);
  35. },
  36. immediate:false, //由父组件触发,因为可能onShow刷新
  37. deep:true,
  38. }
  39. },
  40. methods:{
  41. //搜索
  42. async getList(isRefresh=false){
  43. // console.log('触发函数getList')
  44. if(isRefresh){
  45. this.loadingType='more'
  46. this.pageNum=1
  47. this.pageSize=20
  48. this.list=[]
  49. }
  50. if (this.loadingType === 'loading' || this.loadingType == 'noMore') {
  51. //防止重复加载
  52. return;
  53. }
  54. // console.log('触发开始',this.pageNum)
  55. this.loadingType = 'loading';
  56. const sendData={
  57. ...this.sendData,
  58. page: this.pageNum,
  59. limit: this.pageSize,
  60. }
  61. let res = await this.$request(this.url,sendData);
  62. uni.stopPullDownRefresh();
  63. // this.isTriggerRefresh=false;
  64. // this.isLoaded = true;
  65. let result = res.data.row || [];
  66. if ( this.pageSize > result.length) {
  67. this.loadingType = 'noMore';
  68. } else {
  69. this.loadingType = 'more';
  70. }
  71. // 页数加一
  72. this.pageNum++;
  73. if(isRefresh){
  74. this.pageNum = 2;
  75. this.list=result;
  76. this.$emit('reqEnd',{loadingType:this.loadingType,pageOneRes:result}) //主要判断list是否空
  77. return;
  78. }
  79. result.forEach(item => {
  80. // item = Object.assign(item, this.handleStatus(item.status));
  81. this.list.push(item);
  82. });
  83. this.$emit('reqEnd',{loadingType:this.loadingType,pageOneRes:this.list[0]})
  84. },
  85. }
  86. }
  87. </script>
  88. <style lang="scss" scoped>
  89. // .submit-btn{
  90. // opacity: 0.6;
  91. // }
  92. </style>