uniapp项目爱心相片墙代码

以下是一个简单的 uniapp 爱心相册墙的代码实现：

1. 在 pages 目录下新建一个 photoWall 目录，并在该目录下新建 photoWall.vue 文件。

2. 在 photoWall.vue 文件中，使用以下代码实现页面布局：

<template>
  <view class="photo-wall">
    <view class="photo-container" v-for="(item, index) in photoList" :key="index">
      <image :src="item.imageUrl" mode="aspectFill" class="photo" @click="toggleLike(item)"></image>
      <view class="photo-info">
        <text class="photo-name">{{ item.name }}</text>
        <text class="photo-likes">{{ item.likes }} Likes</text>
        <text class="photo-like" :class="{'liked': item.liked}">{{ item.liked ? '❤️' : '♡' }}</text>
      </view>
    </view>
  </view>
</template>

<style>
.photo-wall {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 10px;
}

.photo-container {
  width: calc(33.33% - 10px);
  margin-bottom: 10px;
  position: relative;
}

.photo {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

.photo-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-size: 13px;
}

.photo-info .photo-name {
  flex: 1;
}

.photo-info .photo-likes {
  margin-right: 10px;
}

.photo-info .photo-like {
  cursor: pointer;
  user-select: none;
  transition: transform 0.2s ease-in-out;
}

.photo-info .photo-like.liked {
  transform: scale(1.2);
}
</style>

3. 在 script 标签中，使用以下代码实现页面数据和方法：

<script>
export default {
  data() {
    return {
      photoList: [
        {
          name: 'Photo 1',
          imageUrl: 'https://picsum.photos/300/300?random=1',
          liked: false,
          likes: 0
        },
        {
          name: 'Photo 2',
          imageUrl: 'https://picsum.photos/300/300?random=2',
          liked: false,
          likes: 0
        },
        {
          name: 'Photo 3',
          imageUrl: 'https://picsum.photos/300/300?random=3',
          liked: false,
          likes: 0
        },
        {
          name: 'Photo 4',
          imageUrl: 'https://picsum.photos/300/300?random=4',
          liked: false,
          likes: 0
        },
        {
          name: 'Photo 5',
          imageUrl: 'https://picsum.photos/300/300?random=5',
          liked: false,
          likes: 0
        },
        {
          name: 'Photo 6',
          imageUrl: 'https://picsum.photos/300/300?random=6',
          liked: false,
          likes: 0
        }
      ]
    }
  },
  methods: {
    toggleLike(item) {
      if (item.liked) {
        item.likes--
      } else {
        item.likes++
      }
      item.liked = !item.liked
    }
  }
}
</script>

4. 在 App.vue 中导入 photoWall 页面：

<template>
  <view>
    <photo-wall></photo-wall>
  </view>
</template>

<script>
import photoWall from './pages/photoWall/photoWall.vue'

export default {
  components: {
    photoWall
  }
}
</script>

5. 运行 uniapp 项目即可看到爱心相片墙效果。

在这个实现中，我们使用了 flex 布局来排列相片，并使用了 position 属性实现相片信息的定位。另外，通过在 data 中维护相片列表，并在 toggleLike 方法中修改相应的数据，实现了爱心的点赞效果。