小红书前端内容展示效果实现

Question

想问一下大家小红书这种内容展示是如何实现的，url发生了变化，是路由了吗

我自己用路由实现的话是跳转到另一个页面了，并不是这种层叠的内容展示，好愁

Answer 1

引自免费微信小程序：皆我百晓生

小红书的内容展示效果可以通过Vue.js的组件化思想和动态数据绑定来实现。具体来说，我们可以创建一个可复用的模块来显示每一条内容（帖子），然后通过路由管理和状态管理（例如Vuex）来控制何时以及如何加载新的内容。

首先，我们需要安装Vue.js和Vue Router：

npm install vue@next vue-router@next

接下来，我们构建基本的项目结构：

project/
|-- src/
|   |-- components/
|   |   |-- Post.vue // 单个帖子组件
|   |-- App.vue // 主应用组件
|   |-- router/
|   |   |-- index.js // 路由配置
|-- main.js // 入口文件
|-- package.json

1. Post.vue (帖子组件)

<template>
  <div class="post">
    <h2>{{ post.title }}</h2>
    <p>{{ post.content }}</p>
    <!-- 根据实际需求添加其他元素，如图片、标签等 -->
  </div>
</template>

<script>
export default {
  props: {
    post: {
      type: Object,
      required: true,
    },
  },
};
</script>

1. App.vue (主应用组件)

<template>
  <div id="app">
    <router-link to="/explore">探索</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
import { createRouter, createWebHistory } from 'vue-router';
import ExploreComponent from './components/ExploreComponent.vue';

const routes = [
  {
    path: '/explore',
    component: ExploreComponent,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default {
  name: 'App',
  components: {
    ExploreComponent,
  },
  setup() {
    return { router };
  },
};
</script>

1. router/index.js (路由配置)

import { createRouter, createWebHistory } from 'vue-router';
import ExploreComponent from '../components/ExploreComponent.vue';

const routes = [
  {
    path: '/explore/:postId?',
    component: ExploreComponent,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

1. main.js (入口文件)

import Vue from 'vue';
import App from './App.vue';
import router from './router';

new Vue({
  render: (h) => h(App),
  router,
}).$mount('#app');

1. ExploreComponent.vue (探索页面组件)

这里我们将使用虚拟DOM和Vue Router的beforeRouteUpdate钩子来实现层叠的效果。当URL改变时，我们只更新相应的帖子信息，而不是整个页面刷新。

<template>
  <div class="explore-component">
    <ul>
      <li v-for="(post, index) in posts" :key="index">
        <router-link :to="{ name: 'detail', params: { postId: post.id }}">
          {{ post.title }}
        </router-link>
      </li>
    </ul>
    <transition-group tag="div" name="fade">
      <Post v-if="currentPostId === post.id" :post="post" key="post.id"></Post>
    </transition-group>
  </div>
</template>

<script>
import Post from '@/components/Post.vue';
import { mapState, mapMutations } from 'vuex';

export default {
  name: 'ExploreComponent',
  components: {
    Post,
  },
  data() {
    return {
      currentPostId: null,
    };
  },
  computed: {
    ...mapState(['posts']),
  },
  methods: {
    ...mapMutations(['setCurrentPostId']),
  },
  beforeRouteEnter(to, from, next) {
    if (from.name !== 'detail') {
      next();
    } else {
      next((vm) => {
        vm.setCurrentPostId(to.params.postId);
      });
    }
  },
  beforeRouteUpdate(to, from, next) {
    this.setCurrentPostId(to.params.postId);
    next();
  },
};
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

在这个例子中，我们使用了Vue Router的动态路由参数(:postId)来传递帖子ID。当用户点击帖子标题时，会触发一个新的路由，但不会完全重新渲染页面，而是通过beforeRouteUpdate钩子来更新当前显示的帖子。同时，我们利用Vue的过渡动画来实现平滑的切换效果。

为了使这个示例完整运行，你需要在你的项目中设置一个简单的 Vuex store 来管理帖子列表和当前显示的帖子。你可以参考下面的 Vuex 示例：

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    posts: [], // 假设这是从服务器获取的数据
  },
  mutations: {
    setCurrentPostId(state, postId) {
      state.currentPostId = postId;
    },
  },
});

这样，你就有了一个类似小红书内容展示的前端页面。当你在浏览器地址栏更改路由时，内容会平滑地过渡，而不是跳转到新的页面。注意，这只是一个基础示例，实际应用可能需要处理更多复杂的情况，比如分页、无限滚动、数据异步加载等。