Question

隐藏进度线性组件的最佳方法是什么？我应该在执行完几秒钟后将其实现吗：

axios.get(this.endpoint)
        .then(response => this.data = response.data)
        .catch(error => console.log(error.response.data));

我要在填充数组后隐藏进度条。

        <v-progress-linear style="margin : 0 auto ;" :indeterminate="isLoading" v-show="isLoading = false"></v-progress-linear>

我的目的是展示 x 几秒钟，以便让我看到它的炫酷效果

Answer 1

您可以使用观察器来继续监视数据阵列，以便在填充数据阵列后可以隐藏进度条。

模板：

<v-progress-linear v-show="isLoading"></v-progress-linear>

脚本：

data: () => ({
   isLoading: true,
   data:[]
}),
watch() {
   data(){
      this.isLoading = false
   }
}

在Codepen上查看演示

https://codepen.io/Agusto/pen/XoqLvb

Answer 2

Codepen <-等待5秒钟，您会看到进度栏消失。

模板：

<v-progress-linear v-show="isLoading"></v-progress-linear>

脚本：

data: () => ({
  isLoading: true
}),
mounted() {
  setTimeout(() => {
    this.isLoading = false;
  }, 5000); // toggle after 5 seconds
}

因此，基本上只要在组件上设置v-show并在要隐藏/显示组件时进行切换即可。在API调用之后将其设置为false（例如在then方法回调内部）。

我仅以5秒（5000毫秒）超时为例，以便您可以注意到更改。当然，您可以根据需要进行更改。

示例在API响应后等待5秒钟，如下所示：

axios.get(this.endpoint).then(response => {
  this.parcels = response.data;
  setTimeout(() => {
    this.isLoading = false;
  }, 5000);
});

Answer 3

这一切都可以通过E/AndroidRuntime: FATAL EXCEPTION: main Process: com.app.app, PID: 2971 : file:///storage/emulated/0/image.jpg exposed beyond app through ClipData.Item.getUri() at android.os.StrictMode.onFileUriExposed(StrictMode.java:1958) at android.net.Uri.checkFileUriExposed(Uri.java:2348) at android.content.ClipData.prepareToLeaveProcess(ClipData.java:941) at android.content.Intent.prepareToLeaveProcess(Intent.java:9735) at android.content.Intent.prepareToLeaveProcess(Intent.java:9720) at android.app.Instrumentation.execStartActivity(Instrumentation.java:1609) at android.app.Activity.startActivityForResult(Activity.java:4472) at android.support.v4.app.BaseFragmentActivityApi16.startActivityForResult(BaseFragmentActivityApi16.java:54) at android.support.v4.app.FragmentActivity.startActivityForResult(FragmentActivity.java:65) at android.app.Activity.startActivityForResult(Activity.java:4430) at android.support.v4.app.FragmentActivity.startActivityForResult(FragmentActivity.java:711) at com.kushy.features.sell.CommunityPostActivity.openCamera(CommunityPostActivity.java:414) at com.kushy.features.sell.CommunityPostActivity$11.onClick(CommunityPostActivity.java:388) at android.support.v7.app.AlertController$ButtonHandler.handleMessage(AlertController.java:162) at android.os.Handler.dispatchMessage(Handler.java:105) at android.os.Looper.loop(Looper.java:164) at android.app.ActivityThread.main(ActivityThread.java:6541) at java.lang.reflect.Method.invoke(Native Method) at com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:240) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:767)中的另一个模板来完成。您可以将<v-data-table>包装在<v-progress-linear>中。然后，当填充您的items数组时，将隐藏无数据模板以及其中的所有内容。

模板：

<template slot="no-data">

如果您真的想花哨的话，还可以在<template slot='no-data'> <v-progress-linear slot='progress' indeterminate></v-progress-linear> </template>下的模板中添加<v-alert>，以使您的用户知道他们在等待什么。：-）

<v-progress-linear>

填充数组后如何隐藏进度条

3 个答案: