uni-app图片的角标应该怎么写

Question

uni-app图片的角标应该怎么写？角标的数据是后端来的

<scroll-view class=" mx-4 border align-center"
            style="height: 220rpx;width: 100%; white-space: nowrap; margin-left: 10px;" scroll-x="true"
            android:scrollbars="none">
            <view class="home-view" @click="interest()">
                <image class="logi" src="../../static/tab/home-logo.png"></image>
                <p class="home-p">{{vacancy}}个</p>
                <p class="home-z">招聘</p>
            </view>
            <view class="home-view">
                <image class="logi" src="../../static/tab/home-logo.png"></image>
                <p class="home-p">{{tabData[1].plateTotalNum}}个</p>
                <p class="home-z">闲置交换</p>
            </view>
            <view class="home-view">
                <image class="logi" src="../../static/tab/home-logo.png"></image>
                <p class="home-p">{{tabData[2].plateTotalNum}}个</p>
                <p class="home-z">自家房招租</p>
            </view>
            <view class="home-view">
                <image class="logi" src="../../static/tab/home-logo.png"></image>
                <p class="home-p">{{tabData[3].plateTotalNum}}个</p>
                <p class="home-z">日亚测评</p>
            </view>
            <view class="home-view">
                <image class="logi" src="../../static/tab/home-logo.png"></image>
                <p class="home-p">{{tabData[4].plateTotalNum}}个</p>
                <p class="home-z">帮带</p>
            </view>
            <view class="home-view">
                <image class="logi" src="../../static/tab/home-logo.png"></image>
                <p class="home-p">{{tabData[5].plateTotalNum}}个</p>
                <p class="home-z">广告互推</p>
            </view>
        </scroll-view>

Answer 1

该回答引用GPTᴼᴾᴱᴺᴬᴵ
要在uni-app的图片上添加角标，可以在图片上添加一个覆盖层，使用绝对定位和z-index属性将角标显示在图片上方。

以下是一个简单的示例代码，假设角标数据是通过uni-app的数据绑定获取的：

<template>
  <div class="image-container">
    <image :src="imageUrl" class="image"></image>
    <div class="badge">{{badgeCount}}</div>
  </div>
</template>

<style>
  .image-container {
    position: relative;
    display: inline-block;
  }
  .badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: red;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    z-index: 1;
  }
</style>

<script>
  export default {
    props: {
      imageUrl: {
        type: String,
        required: true
      },
      badgeCount: {
        type: Number,
        required: true
      }
    }
  }
</script>

在这个示例中，我们使用了一个包含图片和角标的div容器，将角标添加到图片上方。.image-container的position属性被设置为relative，使其成为绝对定位的角标的容器。.badge样式规定角标的样式，包括颜色、大小、圆角等。通过绑定属性，我们可以将图片的URL和角标计数传递给组件。
·
请注意，这只是一个基本示例，您可以根据自己的需要进行调整和修改。