微信小程序中实现气泡提示框、图片css加载动画及容错处理

一.小程序中实现：悬浮提示框 / 气泡提示框

1.效果图

封装组件完整代码

bash 复制代码

Component({
  properties: {
    bgColor: {
      type: String,
      value: '#000000'
    },
    textColor: {
      type: String,
      value: '#ffffff'
    },
    content: {
      type: String,
      value: '将会员系统的积分合并到先见'
    }
  },

  data: {
    show: false
  },

  methods: {
    toggleTip() {
      // 显示提示框
      this.setData({ show: true });

      // 3 秒后自动隐藏
      setTimeout(() => {
        this.setData({ show: false });
      }, 3000);
    }
  }
})





<view class="tip-wrapper">
  <!-- 你的感叹号图标 -->
  <image 
    class="info-icon" 
    src="https://images.hysound.com.cn/wechat/AB/img_04.png" 
    mode="aspectFit"
    bindtap="toggleTip"
  ></image>

  <!-- 提示气泡 -->
  <view
    class="bubble {{ show ? 'show' : 'hide' }}"
    style="background:{{ bgColor }};color:{{ textColor }}"
  >
    {{ content }}
    <!-- 箭头在底部偏左 -->
    <view class="arrow" style="border-top-color:{{ bgColor }}" />
  </view>
</view>



.tip-wrapper {
  position: relative;
  display: inline-block;
  vertical-align: middle;
	bottom: 5rpx;
}

.info-icon {
  width: 38rpx;
  height: 38rpx;
  margin-left: 6rpx;
  display: block;
}

.bubble {
  position: absolute;
  bottom: calc(38rpx + 18rpx); /* 总共上移了4rpx */
  left: -16rpx;
  padding: 20rpx 28rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  white-space: nowrap;
  z-index: 999;
  background: #000;
  color: #fff;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.arrow {
  position: absolute;
  bottom: -18rpx;
  left: 28rpx;
  width: 0;
  height: 0;
  border-left: 12rpx solid transparent;
  border-right: 12rpx solid transparent;
  border-top: 18rpx solid #000;
}

.bubble.show {
  opacity: 1;
  visibility: visible;
}
.bubble.hide {
  opacity: 0;
  visibility: hidden;
}

3.父组件中josn中引入，wxml中使用

二、图片css加载动画，及图片未显示的错误处理

1.效果图：

2.完整代码

bash 复制代码

Component({
properties: {
src: {
  type: String,
  value: '',
  observer(newVal) {
    if (newVal) {
      console.log('子组件：src更新', newVal); // 真机调试能看到
      this.setData({
        imgLoaded: false,
        imgError: false
      });
    }
  }
},
mode: {
  type: String,
  value: 'aspectFill' // 修复：换成aspectFill，适配固定宽高
},
width: {
  type: String,
  value: '300rpx'
},
height: {
  type: String,
  value: '200rpx'
},
radius: {
  type: Number,
  value: 12
}
},
data: {
imgLoaded: false,
imgError: false
},
methods: {
onImgLoad() {
  console.log('子组件：图片加载成功'); // 真机日志能看到
  this.setData({ imgLoaded: true });
  this.triggerEvent('load', { success: true });
},
onImgError() {
  console.log('子组件：图片加载失败');
  this.setData({ imgError: true });
  this.triggerEvent('error', { success: false });
}
}});

c 复制代码

<view class="img-container" style="width:{{width}};height:{{height}};border-radius:{{radius}}rpx;">
  <view class="content-wrapper" wx:if="{{!imgLoaded || imgError}}">
    <view class="loading-dots" >
      <span class="dot"></span> 
    </view>
    <view class="error-placeholder" wx:if="{{imgError}}">
      <text class="error-text">图片加载失败</text>
    </view>
  </view>
  <image 
    class="content-img"
    src="{{src}}"
    mode="{{mode}}"
    bindload="onImgLoad"   
    binderror="onImgError" 
		lazy-load
    style="opacity: {{imgLoaded && !imgError ? 1 : 0}};"
  ></image>
</view>

bash 复制代码

.img-container {
  position: relative;
  background-color: #ffffff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  gap: 12rpx; /* 增大动画和文字间距，更美观 */
}

/* 三点加载动画核心 - 优化版 */
.loading-dots {
  display: flex;
  gap: 10rpx; /* 圆点间距加宽，视觉更舒展 */
  align-items: center;
  justify-content: center;
}

/* 三个圆点基础样式 - 调整大小+颜色深浅 */
.loading-dots .dot,
.loading-dots::before,
.loading-dots::after {
  content: '';
  width: 14rpx; /* 缩小圆点，更精致 */
  height: 14rpx;
  border-radius: 50%;
  background-color: #88bc07; /* 主题绿 */
  opacity: 0.8; /* 初始透明度，动画更自然 */
  /* 优化动画曲线，更丝滑 */
  animation: dot-flash 1.2s infinite ease-in-out both;
}

/* 动画延迟调整 - 节奏更舒服 */
.loading-dots::before {
  animation-delay: 0s;
}
.loading-dots .dot {
  animation-delay: 0.25s;
}
.loading-dots::after {
  animation-delay: 0.5s;
}

/* 优化动画关键帧 - 缩放+透明度结合 */
@keyframes dot-flash {
  0%, 100% {
    opacity: 0.4; /* 初始/结束透明度更低 */
    transform: scale(0.9); /* 缩小幅度减小，更柔和 */
  }
  50% {
    opacity: 1; /* 高亮时完全不透明 */
    transform: scale(1.3); /* 放大幅度适中，不夸张 */
  }
}

/* 图片样式 */
.content-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 图片显示过渡动画 */
  transition: opacity 0.4s ease-in-out;
}

/* 加载失败占位 - 优化文字样式 */
.error-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.error-text {
  font-size: 26rpx; /* 增大文字，更易读 */
  color: #888; /* 调整文字颜色，不刺眼 */
  font-weight: 400;
}

父组件中使用：