Make writing a habit together! This is the 11th day of my participation in the “Gold Digging Day New Plan · April More text Challenge”. Click here for more details.
preface
Hello everyone, last time we shared we realized the boiling point content display function in the boiling point details page. Yesterday, we analyzed that in addition to boiling point content, there is also a comment block below the page, which is divided into publishing comment area, hot comment area and all comments area. Next, in today’s sharing, we will implement the functions of publishing comment area and hot comment area, as shown in the figure below.
Post a comment
This release comments we have had several contact, is there is a post a comment in the boiling point in front of the list page function, under every comment reply is also with similar functions, and we also publish function encapsulation became the common component of the independent, so for the share of the release function to implement and it is simple, It is necessary to import the previously packaged release components into the direct use, and will not be expanded in detail here. Go straight to the code and effects:
<div class="detail-comment-box">
<div class="title">comments</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>
Copy the code
buzz
About simplicity blocks, we first look at the official figure, most popular comments only show 2, the other is all in all the comments, and most popular comment reply is also only show 2, if more than 2 shows a view behind more reply button, click load after more data, quite so paging load. This is a little bit more complicated to implement. About content show that whether the boiling point content reply or comment on content or the content, its are basic format and layout are similar, the basic information are made by the author, the boiling point content/comment on content, and action buttons and other large pieces, and we also have good encapsulation off-the-shelf components, the only need to do is additional in the comments below and a nested reply content, So nesting related layout needs to be adjusted manually. The approximate implementation idea is as follows:
- The first step is to display the comment or reply content with the previously encapsulated comment component
- Both comments and replies are placed horizontally in the same DIV box
- Set the margin property to offset the content to the right by a certain distance
- Then add a gray background color to the response to create a nested visual effect
- Through the browser analysis of the request review backend interface and encapsulated in our own backend
- The data is requested in setup and bound to the COMMENT component
The core code and renderings are as follows:
<div class="title">Hot comments<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>
Copy the codeapi.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;
});
});
Copy the code
conclusion
Today’s sharing has realized the post a comment in the boiling point details page and boiling hot comments data display function, but the effect is compared with the official also sent a lot of, have the time to optimize, the other about reply to view more pages load function is not implemented, achieved in this we stay next to share, share first arrived here today, Like friends welcome to a little red heart, thank you!