uni-app页面LOADING制作

发布于 1周前 作者 ionicwang 来自 Uni-App

uni-app页面LOADING制作

无相关内容

Harmonyos Next教程
2 回复

公司承接项目外包开发、双端（Android，iOS）原生插件开发。
为什么选择我们： 1、1000 项目开发积累，数百种商业模式开发经验，更懂您的需求，沟通无障碍。 2、一年免费技术保障，系统故障或被攻击，2小时快速响应提供解决方案落地。 3、软件开发源码定制工厂，去中间商降低成本，提高软件开发需求沟通效率。 4、纯原生开发，拒绝模板和封装系统，随时更新迭代，增加功能，无需重做系统。 5、APP定制包办软件著作权申请，30天内保证拿到软著证书，知识产权受保护。 6、中软云科技导入严谨的项目管理系统，确保项目准时交付，快速抢占市场商机。 7、软件开发费、维护费、第三方各种费用公开透明，不花冤枉钱，不玩套路。
已有大量双端插件、App、小程序、公众号、PC、移动端、游戏等案例。
行业开发经验：银行、医疗、直播、电商、教育、旅游、餐饮、分销、微商、物联网、零售等
商务QQ：1559653449 商务微信：fan-rising
7x24小时在线，欢迎咨询了解


在uni-app中实现页面加载（LOADING）效果，可以通过多种方式来完成，比如使用原生的<loading>组件、第三方UI库（如uView、Vant Weapp等）或者自定义动画。下面我将展示如何使用uni-app自带的<loading>组件来实现页面加载效果，并提供一个简单的代码示例。

使用uni-app自带的<loading>组件

1. 在页面中使用<loading>组件

首先，在页面的.vue文件中，可以通过条件渲染来控制<loading>组件的显示与隐藏。

<template>
  <view>
    <!-- 页面内容 -->
    <view v-if="!isLoading">
      <!-- 这里放置你的页面内容 -->
      <text>页面内容</text>
    </view>

    <!-- 加载动画 -->
    <loading v-if="isLoading" :text="'数据加载中...'"></loading>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false
    };
  },
  mounted() {
    this.showLoading();
    // 模拟异步数据加载
    setTimeout(() => {
      this.hideLoading();
    }, 3000); // 3秒后隐藏加载动画
  },
  methods: {
    showLoading() {
      this.isLoading = true;
    },
    hideLoading() {
      this.isLoading = false;
    }
  }
};
</script>

<style>
/* 样式可以根据需要自定义 */
</style>

2. 使用uni.showLoading和uni.hideLoading方法

除了在模板中直接使用<loading>组件，你还可以使用uni-app提供的API来控制加载动画。这种方式更适合在全局或需要频繁显示/隐藏加载动画的场景。

export default {
  mounted() {
    uni.showLoading({
      title: '数据加载中...'
    });

    // 模拟异步数据加载
    setTimeout(() => {
      uni.hideLoading();
    }, 3000); // 3秒后隐藏加载动画
  }
};

注意事项

  • 使用<loading>组件时，要确保它的样式不会影响到页面的其他内容。
  • 使用uni.showLoading和uni.hideLoading方法时，注意这些API调用是异步的，确保在数据加载完成后调用uni.hideLoading。
  • 在实际项目中，你可能需要根据不同的场景（如网络请求、数据处理等）来触发加载动画的显示与隐藏。

通过上述方式，你可以在uni-app项目中轻松实现页面加载效果的制作。

回到顶部