karamay_wx/components/loading/index.js

// components/loading/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    progress: 0,
    progressText: 0,
    showProgressBar: true,
    showLogo: false,
    showExploreButton: false
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 点击"开始探索"按钮
    goToIndexPage() {
      console.log(111111)
      // 触发自定义事件，通知父组件
      this.triggerEvent('startexplore');
      
      // 设置已访问标记
      wx.setStorageSync('hasVisited', true);
    },

    // 开始进度条动画
    startProgress() {
      const duration = 3000; // 3秒
      const interval = 30; // 每30ms更新一次
      const steps = duration / interval;
      const increment = 100 / steps;

      const timer = setInterval(() => {
        let currentProgress = this.data.progress + increment;
        
        if (currentProgress >= 100) {
          clearInterval(timer);
          currentProgress = 100;
          
          this.setData({
            progress: currentProgress,
            progressText: Math.floor(currentProgress)
          });

          // 进度条完成后，延迟显示logo
          setTimeout(() => {
            this.setData({
              showProgressBar: false,
              showLogo: true
            });

            // logo显示2秒后，显示"开始探索"按钮
            setTimeout(() => {
              this.setData({
                showExploreButton: true
              });
            }, 2000);
          }, 500);
        } else {
          this.setData({
            progress: currentProgress,
            progressText: Math.floor(currentProgress)
          });
        }
      }, interval);
    }
  },

  /**
   * 组件生命周期
   */
  lifetimes: {
    attached() {
      // 组件实例进入页面节点树时执行
      this.startProgress();
    }
  }
});