Browse Source

list加载加上loading

master
xuhuajiao 2 years ago
parent
commit
6022868fc7
  1. 9
      src/views/mixins/booklist.js
  2. 2
      src/views/module/bookList.vue

9
src/views/mixins/booklist.js

@ -6,8 +6,9 @@ export const bookListCrud = {
defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"', defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"',
bookData: [], bookData: [],
page: 1, page: 1,
pageSize: 9,
pageCount: 1
pageSize: 13,
pageCount: 1,
bookLoading: false
} }
}, },
computed: { computed: {
@ -20,6 +21,7 @@ export const bookListCrud = {
methods: { methods: {
// 获取热门/新书图书list // 获取热门/新书图书list
getBookData() { getBookData() {
this.bookLoading = true
const bookType = this.$route.query.bookType const bookType = this.$route.query.bookType
const params = { const params = {
libcode: this.libcode, libcode: this.libcode,
@ -53,6 +55,7 @@ export const bookListCrud = {
FetchCoverByISBN(params).then((res) => { FetchCoverByISBN(params).then((res) => {
item.cover = window.URL.createObjectURL(res) item.cover = window.URL.createObjectURL(res)
this.bookData.push(item) this.bookData.push(item)
this.bookLoading = false
}) })
}, },
// 滚动加载 // 滚动加载
@ -62,8 +65,10 @@ export const bookListCrud = {
const scrollHeight = e.target.scrollHeight const scrollHeight = e.target.scrollHeight
// 滚动条到底部 // 滚动条到底部
if (scrollTop + windowHeight === scrollHeight) { if (scrollTop + windowHeight === scrollHeight) {
this.bookLoading = true
this.page++ this.page++
if (this.page > this.pageCount) { if (this.page > this.pageCount) {
this.bookLoading = false
this.$message.success('暂无更多数据~') this.$message.success('暂无更多数据~')
return return
} }

2
src/views/module/bookList.vue

@ -1,5 +1,5 @@
<template> <template>
<div class="hotbook-box" @scroll="lazyLoading">
<div v-loading.fullscreen.lock="bookLoading" class="hotbook-box" @scroll="lazyLoading">
<div v-if="bookList.length > 0" class="most-book" @click="handleDetails(0)"> <div v-if="bookList.length > 0" class="most-book" @click="handleDetails(0)">
<div class="most-book-img"> <div class="most-book-img">
<img :src="bookData[0].cover ? bookData[0].cover : ''" :onerror="defaultImg"> <img :src="bookData[0].cover ? bookData[0].cover : ''" :onerror="defaultImg">

Loading…
Cancel
Save