shoot-miniprograms/src/pages/my-like-list.vue

<script setup>
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import Avatar from "@/components/Avatar.vue";
import ScrollList from "@/components/ScrollList.vue";
import { getMyLikeList } from "@/apis";

const list = ref([]);

const onListLoading = async (page) => {
  const result = await getMyLikeList(page);
  if (page === 1) list.value = result.list;
  else list.value = list.value.concat(result.list);
  return result.list.length;
};
</script>

<template>
  <Container
    :bgType="2"
    bgColor="#F5F5F5"
    :whiteBackArrow="false"
    title="赞我的朋友"
  >
    <view class="container">
      <ScrollList :onLoading="onListLoading">
        <block v-for="item in list" :key="item.id">
          <view class="like-item">
            <Avatar :src="item.avatar" mode="widthFix" />
            <text>{{ item.name }}</text>
          </view>
          <view class="like-bottom-line" />
        </block>
      </ScrollList>
    </view>
  </Container>
</template>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
}
.like-item {
  background: $uni-white;
  height: 140rpx;
  width: 100%;
  font-weight: 500;
  font-size: 26rpx;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 25rpx;
}
.like-item > text {
  margin-left: 25rpx;
}
.like-bottom-line {
  width: calc(100% - 50rpx);
  margin: 0 25rpx;
  height: 1rpx;
  background: #e5e5e5;
}
</style>