¡Acostúmbrate a escribir juntos! Este es el día 11 de mi participación en el "Nuevo plan diario de Nuggets · Desafío de actualización de abril", haga clic para ver los detalles del evento .
prefacio
Hola a todos, la última vez que compartimos, implementamos la función de visualización de contenido del punto de ebullición en la página de detalles del punto de ebullición. Ayer analizamos que, además del contenido del punto de ebullición, la página de detalles del punto de ebullición también tiene un bloque de comentarios a continuación. El bloque de comentarios se divide en el área de comentarios de publicaciones, el área de comentarios calientes y el área de todos los comentarios. En el intercambio de hoy, publicaremos comentarios La realización de la función del área y el área de evaluación en caliente, como se muestra en la figura a continuación.
Publicar un comentario
Hemos estado en contacto con esta función de comentario de publicación varias veces. Hay una función de comentario de publicación en la página anterior de la lista de puntos de ebullición, y se usa una función similar para la respuesta debajo del comentario diario, y también encapsulamos especialmente la función de publicación en una función independiente. Es un componente común, por lo que es simple implementar la función de publicación en este intercambio. Es necesario importar el componente de publicación previamente empaquetado y usarlo directamente, y no lo expandiré en detalle aquí. Basta con mirar el código y las representaciones:
<div class="detail-comment-box">
<div class="title">评论</div>
<div class="reply-pub">
<van-image
round
width="30px"
height="30px"
src="https://p9-passport.byteacctimg.com/img/user-avatar/4eb96a510ba31abc55e029bd74da2be0~300x300.image"
/>
<reply :itemId="pin.msg_id" :isShow="true" :msg_id="pin.msg_id" />
</div>
复制代码Reseñas calientes
Con respecto al bloque de comentarios calientes, primero echemos un vistazo a la imagen oficial. Solo se mostrarán 2 comentarios populares como máximo, y el resto se colocará en todos los comentarios. Las respuestas a los comentarios calientes solo se mostrarán como máximo 2, si hay más de 2 Se muestra un botón para ver más respuestas justo detrás y se cargan más datos después de hacer clic, lo que equivale a la carga de paginación. Esto es un poco más complicado de implementar. Con respecto a la visualización del contenido, ya sea contenido de punto de ebullición, contenido de comentario o contenido de respuesta, el formato y el diseño básicos son similares. Se componen de información básica del autor, contenido de punto de ebullición/contenido de comentario y botones de operación. Ya hemos resumido el componentes listos para usar antes, y lo único adicional que debe hacerse es tener un contenido de respuesta anidado debajo del comentario, por lo que el diseño relacionado con el anidamiento debe ajustarse manualmente. La idea es más o menos la siguiente:
- Primero, use el componente de comentario previamente encapsulado para mostrar el comentario o el contenido de la respuesta.
- Ya sea un comentario o una respuesta, lo colocamos en el mismo cuadro div en una estructura horizontal
- Desplace el contenido de la respuesta una cierta distancia hacia la derecha configurando la propiedad de margen
- Luego agregue un color de fondo gris al contenido de la respuesta para formar visualmente un efecto anidado
- Analice la interfaz de back-end para solicitar reseñas interesantes a través del navegador y encapsúlela en nuestro propio backend
- Solicite datos en la configuración y vincúlelos al componente de comentarios
El código central y las representaciones son las siguientes:
<div class="title">热门评论<van-icon name="fire-o" color="#ee0a24" /></div>
<div class="comment-hot" v-for="hot in hots" :key="hot.comment_id">
<comment
:avatar_large="hot.user_info.avatar_large"
:user_name="hot.user_info.user_name"
:job_title="hot.user_info.job_title"
:company="hot.user_info.company"
:ctime="hot.comment_info.ctime"
:origin_content="hot.comment_info.comment_content"
:sub_content="hot.comment_info.sub_content"
:comment_id="hot.comment_info.item_id"
:pic_list="hot.comment_info.comment_pics"
:is_followed="false"
/>
<div class="operation">
<div class="comment">
<van-icon name="chat-o" />
{{ hot.comment_info.reply_count }}
</div>
<div
class="digg"
:class="{ active: hot.user_interact.is_digg }"
@click="digg(hot.msg_id, hot.user_interact.is_digg)"
>
<van-icon name="good-job-o" />{{ hot.comment_info.digg_count }}
</div>
</div>
<div
class="comment-reply"
v-for="rep in hot.reply_infos"
:key="rep.reply_id"
>
<comment
:avatar_large="rep.user_info.avatar_large"
:user_name="rep.user_info.user_name"
:job_title="rep.user_info.job_title"
:company="rep.user_info.company"
:ctime="rep.reply_info.ctime.toString()"
:origin_content="rep.reply_info.reply_content"
:sub_content="rep.reply_info.reply_content"
:comment_id="rep.reply_info.item_id"
:pic_list="rep.reply_info.reply_pics"
:is_followed="false"
/>
<div class="operation">
<div class="comment">
<van-icon name="chat-o" />
{{ rep.reply_info.burry_count }}
</div>
<div
class="digg"
:class="{ active: rep.user_interact.is_digg }"
@click="digg(hot.msg_id, rep.user_interact.is_digg)"
>
<van-icon name="good-job-o" />{{ rep.reply_info.digg_count }}
</div>
<div></div>
</div>
</div>
</div>
复制代码api.hotComment(msg_id).then((res) => {
state.hots = [];
state.hots.push(res.data.shift());
state.hots.push(res.data.shift());
console.log(state.hots);
state.hots.forEach((item) => {
item.comment_info.sub_content =
item.comment_info.comment_content.substring(0, 80);
item.comment_info.comment_content.length >= 80
? (item.comment_info.sub_content += "...")
: null;
item.comment_info.show_content = item.comment_info.sub_content;
});
});
复制代码Resumir
El intercambio de hoy implementa la función de visualización de datos de publicación de comentarios y comentarios populares sobre el contenido del punto de ebullición en la página de detalles del punto de ebullición, pero el efecto es mucho peor que el oficial y hay tiempo para optimizarlo. La función para ver más respuestas aún no se ha implementado. Guardaremos esto para el próximo intercambio. El intercambio de hoy estará aquí primero. Los amigos a quienes les guste pueden dar un pequeño corazón rojo, ¡gracias!