【页面案例汇总】微信小程序粉丝关注列表页面

<view class="container">
  <view class="topbar">
    <view class="title">我的关注列表</view>
  </view>
  <view class="list">
    <view class="item" wx:for="{{followList}}" wx:key="{{item.id}}">
      <image class="avatar" src="{{item.avatarUrl}}"></image>
      <view class="info">
        <view class="name">{{item.nickname}}</view>
        <view class="desc">{{item.bio}}</view>
      </view>
    </view>
  </view>
</view>

<style>
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #f2f2f2;
  }
  .topbar {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-bottom: 1rpx solid #ccc;
    box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
  }
  .title {
    font-size: 18px;
    font-weight: bold;
  }
  .list {
    width: 100%;
    margin-top: 16px;
  }
  .item {
    display: flex;
    align-items: center;
    padding: 16px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
    margin-bottom: 16px;
  }
  .avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin-right: 16px;
  }
  .info {
    display: flex;
    flex-direction: column;
  }
  .name {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 8px;
  }
  .desc {
    font-size: 14px;
    color: #999;
  }
</style>

<script>
  Page({
    data: {
      followList: [
        {
          id: 1,
          nickname: "小明",
          bio: "爱生活，爱音乐，爱摄影",
          avatarUrl: "https://source.unsplash.com/random/64x64"
        },
        {
          id: 2,
          nickname: "小红",
          bio: "做自己喜欢的事情，过自己想要的生活",
          avatarUrl: "https://source.unsplash.com/random/64x64"
        },
        {
          id: 3,
          nickname: "小刚",
          bio: "希望能够成为一名前端工程师",
          avatarUrl: "https://source.unsplash.com/random/64x64"
        }
      ]
    }
  })
</script>

这个页面包括了一个顶部导航栏和一个关注列表，每个关注列表项包括了一个头像、昵称和简介。你可以将 followList 替换为你的粉丝关注列表数据。