【页面案例汇总】交友app小程序页面

代码示例：

<template>
  <view class="container">
    <view class="tab">
      <view class="tab-item" :class="{ active: activeTab === 'nearby' }" @click="activeTab = 'nearby'">
        附近的人
      </view>
      <view class="tab-item" :class="{ active: activeTab === 'message' }" @click="activeTab = 'message'">
        消息
      </view>
      <view class="tab-item" :class="{ active: activeTab === 'profile' }" @click="activeTab = 'profile'">
        我的
      </view>
    </view>

    <view class="page" v-show="activeTab === 'nearby'">
      <view class="search-bar">
        <input class="search-input" type="text" placeholder="搜索附近的人">
        <button class="search-btn">搜索</button>
      </view>
      <view class="user-list">
        <view class="user-item" v-for="(user, index) in nearbyUsers" :key="index">
          <image class="user-avatar" :src="user.avatar"></image>
          <view class="user-info">
            <view class="user-name">{{ user.name }}</view>
            <view class="user-description">{{ user.description }}</view>
          </view>
          <view class="btn-group">
            <button class="btn btn-primary" @click="sendMsg(user)">发消息</button>
            <button class="btn btn-secondary" @click="addFriend(user)">加好友</button>
          </view>
        </view>
      </view>
    </view>

    <view class="page" v-show="activeTab === 'message'">
      <view class="chat-list">
        <view class="chat-item" v-for="(chat, index) in messageList" :key="index">
          <image class="chat-avatar" :src="chat.avatar"></image>
          <view class="chat-info">
            <view class="chat-name">{{ chat.name }}</view>
            <view class="chat-message">{{ chat.message }}</view>
          </view>
          <view class="chat-time">{{ chat.time }}</view>
        </view>
      </view>
    </view>

    <view class="page" v-show="activeTab === 'profile'">
      <view class="profile-header">
        <image class="profile-avatar" src="https://cdn.pixabay.com/photo/2019/11/09/17/45/portrait-4616146_1280.jpg"></image>
        <view class="profile-name">Lucy</view>
        <view class="profile-description">爱好：旅游、音乐、电影</view>
      </view>
      <view class="profile-action">
        <button class="btn btn-primary" @click="editProfile">编辑个人信息</button>
        <button class="btn btn-secondary" @click="logout">退出登录</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'nearby',
      nearbyUsers: [
        {
          id: 1,
          name: 'Tom',
          description: '我喜欢唱歌，跳舞，弹吉他',
          avatar: 'https://cdn.pixabay.com/photo/2014/07/04/12/35/guitar-384096_1280.jpg'
        },
        {
          id: 2,
          name: 'Jerry',
          description: '我喜欢看电影，旅游，游泳',
          avatar: 'https://cdn.pixabay.com/photo/2016/11/29/13/07/beautiful-1869489_1280.jpg'
        }
      ],
      messageList: [
        {
          id: 1,
          name: 'Tom',
          avatar: 'https://cdn.pixabay.com/photo/2014/07/04/12/35/guitar-384096_1280.jpg',
          message: '你好，我们可以交个朋友吗？',
          time: '10:30'
        },
        {
          id: 2,
          name: 'Jerry',
          avatar: 'https://cdn.pixabay.com/photo/2016/11/29/13/07/beautiful-1869489_1280.jpg',
          message: '好的，很高兴认识你。',
          time: '11:00'
        }
      ]
    };
  },
  methods: {
    sendMsg(user) {
      // 发送私信
    },
    addFriend(user) {
      // 发送好友请求
    },
    editProfile() {
      // 编辑个人信息
    },
    logout() {
      // 退出登录
    }
  }
};
</script>

<style>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.tab {
  display: flex;
  background-color: #fff;
  border-bottom: 1px solid #e5e5e5;
  height: 44px;
}

.tab-item {
  flex: 1;
  text-align: center;
  line-height: 44px;
  color: #999;
  font-size: 16px;
}

.tab-item.active {
  color: #007aff;
  border-bottom: 2px solid #007aff;
}

.page {
  display: none;
}

.search-bar {
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.search-input {
  flex: 1;
  height: 30px;
  padding: 0 10px;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
}

.search-btn {
  margin-left: 10px;
  background-color: #007aff;
  color: #fff;
  border-radius: 5px;
  padding: 5px 10px;
}

.user-list {
  padding: 10px;
}

.user-item {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
}

.user-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 10px;
}

.user-name {
  font-size: 16px;
  font-weight: bold;
}

.user-description {
  font-size: 14px;
  margin-top: 5px;
  color: #999;
}

.btn-group {
  margin-left: auto;
}

.btn {
  padding: 5px 10px;
  border-radius: 5px;
}

.btn-primary {
  background-color: #007aff;
  color: #fff;
  margin-right: 10px;
}

.btn-secondary {
  background-color: #e5e5e5;
  color: #333;
}

.chat-item {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
}

.chat-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.chat-info {
  flex: 1;
}

.chat-name {
  font-size: 16px;
  font-weight: bold;
}

.chat-message {
  font-size: 14px;
  margin-top: 5px;
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-time {
  font-size: 12px;
  color: #999;
}

.profile-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.profile-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.profile-name {
  font-size: 18px;
  font-weight: bold;
  margin-top: 10px;
}

.profile-description {
  font-size: 14px;
  margin-top: 10px;
}

.profile-action {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.btn-primary {
  background-color: #007aff;
  color: #fff;
  margin-right: 10px;
}

.btn-secondary {
  background-color: #e5e5e5;
  color: #333;
}
</style>

以上代码实现了一个简单的交友小程序的前端页面，包括附近的人、消息和个人中心三个页面，实现了搜索附近的人、发送私信、加好友、编辑个人信息和退出登录等功能。每个页面都有对应的样式和交互效果。

以上代码仅供参考，具体实现细节和样式可以根据需求自行调整。

---

源码获取方法：

需要完整源码的朋友，希望你能点赞+收藏+评论，然后私信我即可~

会员学习群：【一对一答疑】

如果私信未回复，可添加学习会员小助手咨询（微信：mifankeji77）