huarun/traceCodePackages/wigets/BottomScrollTip.vue

<template>
  <view v-if="visible" class="bottom-scroll-tip" :style="wrapStyle">
    <view class="tip-pill">
      <text class="tip-text">{{ text }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: "BottomScrollTip",
  props: {
    text: { type: String, default: "滑动查看更多内容" },
    visible: { type: Boolean, default: true },
    bottom: { type: String, default: "" }, // 可选：自定义距离底部（不含安全区）
  },
  computed: {
    wrapStyle() {
      if (this.bottom) {
        return {
          bottom: `calc(${this.bottom} + env(safe-area-inset-bottom))`,
        };
      }
      return {};
    },
  },
};
</script>

<style scoped>
.bottom-scroll-tip {
  position: fixed;
  left: 0;
  right: 0;
  bottom: env(safe-area-inset-bottom);
  z-index: 90;
  display: flex;
  justify-content: center;
  pointer-events: none;
  padding: 10rpx 24rpx 18rpx;
}

.tip-pill {
  pointer-events: none;
  padding: 10rpx 20rpx;
  border-radius: 999rpx;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6rpx);
}

.tip-text {
  font-size: 24rpx;
  color: #fff;
  letter-spacing: 1rpx;
}
</style>