“This is the 23rd day of my participation in the First Challenge 2022. For details: First Challenge 2022”

preface

Everybody is good, on a share of the outstanding author list in the load data and displays list, most functions are achieved, but there are some scattered problem need to optimization, although list data has been loaded out until now, but if you look carefully will find when the scroll down to page load are repeated data, is the first page of the data, Today’s share is dedicated to fixing these problems:

  • List page turning data reloading fix
  • Toggle labels to refresh the data list

List page turning data reloading fix

Although the excellent author list display is realized in the previous sharing, the same data is loaded when scrolling through pages, that is to say, no matter how many pages are loaded, the data on the first page is repeatedly loaded. Then a closer look at the official interface revealed:

According to our traditional page turning operation, every page turned, the page number will be increased by 1 to the background, and we call the recommend request author data is also implemented in accordance with this operation (page number increased by 1), but the official interface does not increase the page number by 1, but increase the page number to 20 each time to turn the page

If you find the root cause of the problem, you can fix it by incrementing the page number by 20 instead of automatically incrementing the page number by 1.

let pageNo = 0;
const onLoad = function (cate_id) {
      // Omit unmodified parts of the code
      pageNo += 20; // Add 20 pages each time
    });
};
Copy the code

Toggle labels to refresh the data list

The second problem is that all labels share the same data list, so when you click the TAB to switch, the data list is not refreshed or reloaded, so all labels load the same data, which is obviously not reasonable, and the solution is very simple:

‘Cate_ID’ and ‘cate_ID’ are also passed by the cate_ID parameter when calling ‘RECOMMEND’, and this parameter ‘category_id’ is the corresponding category_id value of each tag. We simply need to pass in the ‘category_id’ tag ‘when switching. The van-Tabs component provides us with a click-tab event that is triggered when each TAB is clicked, and we can switch the TAB attribute data list by clearing the authorList and reloading the data in this event.

Because each van-tab is dynamically generated by the V-for directive, and click-tab events are bound to van-tabs, the parent component of the van-tab, And this category_id is not loaded yet, which means that you cannot get ‘category_id’ in a click-tab event. After some research and exploration, we find that when the click-tab event is triggered, it ‘category_id’ and ‘name’ attribute are passed in. Then we need to bind one of these two values to ‘category_id’ and ‘title’ is displayed on the page. Name is the name that is used as a tag and does not appear on the page, so setting the name attribute to a specific tag category_id does the trick perfectly.

 <van-tabs color="#1e80ff" v-model:active="active" @click-tab="clickTab"><! -- Add click-tab events -->
    <van-tab
      v-for="item in categoryList"
      :key="item.category_id"
      :title="item.category_name"
      :name="item.category_id" <!--nameValue is set tocategory_id-->
    >
      <! -- omit code -->
    </van-tab>
  </van-tabs>
Copy the code
 const clickTab = function (params) {
      state.authorList = [];
      onRefresh(params.name);
 };
Copy the code

conclusion

Today’s share did not achieve new functions, but will share the previous two problems left: list page data repeated loading and switching label list does not refresh the problem. Tomorrow we’ll continue to refine the new features in the author list: follow and unfollow, and click the back button to return to the home page follow list. That’s all for today’s sharing!