vue单页面的数据请求添加loading效果

该博客介绍了如何在Vue单页面应用中实现数据请求时的loading效果。通过在app.vue引入loading组件,并结合store.js和request.js进行配置,利用axios的拦截器功能,无论请求在何处发起,都能统一管理加载状态。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、在app.vue,先引入你的loading组件

app.vue

<template>
  <div id="app">
    <router-view/>
    <div class="load_cover" v-if="showLoading">
      <!-- <van-loading /> -->
      <van-loading color="red"/>
      <!-- <van-loading type="spinner" /> -->
      <!-- <van-loading type="spinner" color="white" /> -->
    </div>
  </div>
</template>

<script>
// 引入vuex的辅助方法
import { mapState } from 'vuex'
import Vue from 'vue'
// 引入loading插件,自己的也可以哦,直接在组件上判断显示隐藏即可
import { Loading } from 'vant'
Vue.use(Loading)
export default {
  // computed: mapState({
  //   showLoading: (state) => state.showLoading
  // })
  computed: {
    ...mapState([
      'showLoading'
    ])
  }
}
</script>

<style>
.van-loading__circular circle{
  stroke-width: 5px;
}
.van-loading{
  width: 40px;
  height: 40px;
  top: 40%;
  left: 50%;
  transform: translateX(-50%)
}
.load_cover{
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,.5);
  z-index: 999;
  position: fixed;
  left: 0;
  top:0;
}
*{
  padding: 0;
  margin: 0;
}
html,body{
  width: 100%;
}
</style>

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    openId: '',
    code: '',
    showLoading: true
  },
  mutations: {
    updateLoading (state, showLoading) {
      state.showLoading = showLoading
    }
  }
})

request.js
这里我是把axios单独的抽出来了,如果你在main.js里,直接在main.js引入拦截器也是一样的

import store from '../store/store'
import axios from 'axios'

const service = axios.create({
  baseURL: 'http://666.6666666.666'
})

service.interceptors.request.use((config) => {
  store.commit('updateLoading', true)
  return config
}, (err) => {
  return Promise.reject(err)
})
service.interceptors.response.use((response) => {
  store.commit('updateLoading', false)
  if (response.status === 200) {
    return response.data
  } else {
    return {code: -2}
  }
}, (err) => {
  return Promise.reject(err)
})
export default service

over警告~

### 如何在使用 `vue-seamless-scroll` 时实现分页请求数据 为了实现在使用 `vue-seamless-scroll` 的过程中动态加载更多数据并完成分页效果,可以通过监听滚动位置来触发新的数据请求。以下是具体方法: #### 动态加载逻辑 通过设置容器的高度以及每一项的高度,计算当前已滚动的距离是否超过设定阈值。如果超过了,则发起新一次的数据请求并将返回的新数据追加到现有数据集中。 由于 `vue-seamless-scroll` 自动复制了一个额外的 DOM 节点用于平滑过渡,在检测滚动距离时需要注意实际显示区域的高度而非整个虚拟列表长度[^3]。 #### 关键代码示例 以下是一个完整的代码片段演示如何结合 `vue-seamless-scroll` 和分页机制工作: ```javascript <template> <div class="scroll-container"> <vue-seamless-scroll :data="items" class="seamless-warp"> <ul> <li v-for="(item, index) in items" :key="index">{{ item }}</li> </ul> </vue-seamless-scroll> </div> </template> <script> import vueSeamlessScroll from 'vue-seamless-scroll'; export default { data() { return { items: [], page: 1, loading: false, hasMoreData: true, }; }, components: { vueSeamlessScroll, }, methods: { fetchData(pageNumber) { this.loading = true; // 模拟异步获取数据 setTimeout(() => { const newData = Array.from({ length: 10 }).map((_, i) => `${pageNumber}-${i}` ); if (newData.length === 0 || !this.hasMoreData) { this.hasMoreData = false; } else { this.items.push(...newData); this.page += 1; } this.loading = false; }, 1000); // 延迟模拟网络延迟 }, handleScroll(event) { const containerHeight = event.target.clientHeight; const scrollPosition = event.target.scrollTop; // 如果接近底部则加载更多 if ( scrollPosition + containerHeight >= event.target.scrollHeight && !this.loading && this.hasMoreData ) { this.fetchData(this.page); } }, }, mounted() { window.addEventListener('scroll', this.handleScroll); // 初始加载第一页数据 this.fetchData(1); }, }; </script> <style scoped> .scroll-container { height: 400px; /* 设置固定高度 */ overflow-y: auto; } .seamless-warp ul li { line-height: 45px; /* 单条目高度 */ } </style> ``` 上述代码中实现了如下功能: - **初始渲染**:首次进入页面即调用 `fetchData()` 方法加载第一批数据。 - **事件绑定**:利用 `handleScroll` 函数监控用户的滚动行为,并判断何时触底以决定是否继续拉取后续批次的数据。 注意这里假设单个元素高为45像素,这与之前提到的内容一致。 #### 注意事项 对于某些场景下可能遇到的问题比如选项卡切换导致无法正常运行的情况,建议采用条件渲染代替隐藏属性(`v-if`)替代原本使用的可见性控制指令 (`v-show`) 来规避此类异常现象的发生[^4]。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值