“This is the 22nd day of my participation in the First Challenge 2022. For details: First Challenge 2022”
preface
In the last share, we realized the following page to display the author’s profile picture, as well as the encapsulation and use of the sub tag component JTags of other list pages, so as to realize the dynamic loading of sub-tags. In addition to the display of profile picture and tag, clicking the profile picture or clicking a specific tag also has other functions. For example, clicking the author’s profile picture in the following page will jump to a new page to show more authors, and clicking the sub-tags in other list pages will re-filter the article data in the list according to the selected main tags and sub-tags as conditions. Today, in this sharing, we will first click the following page to jump to the author list page.
Author list
Click the profile picture of the recommended author in the following page to jump to the author list page. First, at the top is a navigation bar, which is nothing more than a van-nav-bar component like any other page, with a back button and a “good Author list” title on the left and a description of the ranking rules on the right. Followed by another TAB page, the following is a specific list display, the front page is basically the same. The components to be used are basically determined (van-nav-bar, van-tabs, van-list).
The structure of the page and the components to be used have been clear, the following analysis of how to implement (general idea) :
- Create a new authorlist. vue page and configure the routing information
- Adding template Content
- Start by adding a van-nav-bar component to the top of the page, set left-arrow to true, left-text to “Good author list”, right-text to “Sorting”, and add @click-left and @click-right events. Click the icon to return to the previous page, click the sorting rules pop up after the specific rule description. However, this function is not implemented for the time being because there is no interface for requesting rules on the Web side.
- Add a van-tabs component below the van-nav-bar component and set the sticky and swipeable properties to true
- Then add a van-tab child to van-tabs, set the title property to “hot tabs”, and add another van-tab child, which is looped through the V-for instruction and returned to the data source through the query_category_BRIEFs interface
- Van-pull-refresh and van-lis components are added to each sub-tab (van-tab) to display and refresh data lists. Note also here the status of the “followed” or “followed” buttons following each author (as determined by the isFollowed attribute in the data source returned in the background)
- JavaScript core code content
- Define the following responsive properties: refreshing, finished, loading, Active, categoryList, and authorList
- Call the query_category_briefs and recommend back-end interfaces, respectively, in the setup method to get the label category and authorList data source and assign the returned result to the categoryList and authorList responsive properties, respectively
- Define the onLoad method to call the back-end interface to request author data (scrolling autopage-load data)
- Define the onRefresh method to implement the pull-down refresh state
Core code and renderings:
<van-nav-bar left-arrow left-text=The Best Authors list right-text="Sorting rules" />
<van-tabs color="#1e80ff" v-model:active="active" @click-tab="clickTab">
<van-tab
v-for="item in categoryList"
:key="item.category_id"
:title="item.category_name"
>
<div class="tab-list-content">
<van-pull-refresh
v-model="refreshing"
@refresh="onRefresh(item.category_id)"
>
<van-list
v-model:loading="loading"
:finished="finished"
finished-text="There is no more."
@load="onLoad(item.category_id)"
>
<van-cell v-for="item in authorList" :key="item.user_id">
<div class="author-list">
<van-image round :src="item.avatar_large" />
<div class="author-item">
<div>
<span class="name">{{ item.user_name }}</span>
<van-image :src="level[item.level]" />
</div>
<div class="info">
{{ item.job_title }} @ {{ item.company }}
</div>
<div class="describ">Get {{item.got_digg_count}} like · {{item.got_view_count}} read</div>
</div>
<div class="follow">
<van-button
v-show=! "" item.isfollowed"
round
plain
size="mini"
type="primary"
></van-button ><van-button
v-show="item.isfollowed"
type="success"
size="mini"
round
></van-button ></div>
</div>
</van-cell>
</van-list>
</van-pull-refresh>
</div>
</van-tab>
</van-tabs>
Copy the codeapi.queryCategoryBriefs().then((res) = > {
state.categoryList = res.data;
state.categoryList.unshift({
category_id: "999".category_name: "Hot list"}); });let pageNo = 0;
const onLoad = function (cate_id) {
console.log(cate_id);
cate_id = cate_id === -999 ? "" : cate_id;
http.post("/juejin/recommend", { limit: 20.cate_id: "" }).then((res) = > {
if (state.refreshing) {
state.authorList = [];
state.refreshing = false; } state.authorList.push(... res.data); state.loading =false;
if (pageNo >= 50) {
// Only 50 pages (1000 pieces) of data are loaded
state.finished = true;
}
pageNo++;
});
};
const onRefresh = function (cate_id) {
pageNo = 0; // Reload from page 1
state.finished = false; // Clear the list data and reload
state.loading = true;
onLoad(cate_id);
};
Copy the code
conclusion
The share we implemented recommend the authors list of features and load, but there are a few small details not implemented, such as click switch label corresponding list data, click on the name of the author and jump, author of the home page or image click attention or has concerned button realize functions such as attention or cancel attention, share we continue to optimize next time. That’s all for today’s sharing.