Moment For Technology

From wechat small program to HONGmeng JS development [13] -- List loading more & back to the top

Posted on Aug. 6, 2022, 1:48 a.m. by 王家豪
Category: The code of life Tag: HongMeng OS

Hongmeng guide, small white quick! From meng new to master, how to quickly master hongmeng development?[Course Entrance]

Directory:

1. List loads more

2, list back to top

3, "from wechat small program to Hongmeng JS Development" series of articles collection

1. List loads more

If there is a lot of data that needs to be displayed in a list, fetching all the data and displaying it all at once can be a huge burden on both the back-end server and the performance of the front-end rendering, wasting resources and causing slow page loading.

For paging on the web, users generally click "previous page" and "Next page" to turn the page, while mobile devices generally load the data on the next page after sliding to the bottom of the page and connect the data to the bottom of the list. In the List component, events can be bound and processed through the onScrollBottom property.

Visually, the data is contiguous, but it has already triggered a page turn.

List part of HML view layer:

list scrollbar="auto" scrolleffect="no" onscrollbottom="loadMore" id="list" block for="{{ comments }}" list-item div image src="/common/user.png"/image div class="title" text style="color: #333333; font-size: 32px;"  {{ $item.user.username }} /text text style="color: #666666; font-size: 30px;"  {{ $item.date }} /text /div rating numstars="5" rating="{{ $item.star }}" indicator="true"/rating /div text  class="content" {{ $item.content }} /text /list-item /block /listCopy the code

CSS rendering layer:

list {
    width: 100%;
    height: 1400px;
}
list-item {
    width: 100%;
    border-bottom: 1px solid #bbbbbb;
    background-color: #fdfdfd;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    padding: 10px 0 10px 0;
}
list-item image {
    width: 60px;
    height: 60px;
    border-radius: 30px;
    margin-left: 20px;
    margin-top: 20px;
    object-fit: contain;
}
.title {
    margin-left: 20px;
    height: 100px;
    display: flex;
    flex-direction: column;
    width: 450px;
}
.titletext {
    height: 50px;
    line-height: 50px;
}
rating {
    width: 150px;
    height: 50px;
}
.content {
    margin: 10px 20px 10px 20px;
    font-size: 30px;
    color: #333333;
}
Copy the code

Js logic layer:

import fetch from '@system.fetch'; import prompt from '@system.prompt'; export default { data: { ...... comments: [], page: 1, maxPage: 1 }, onInit() { this.listComments(); }, // list loadMore() {if (this.page  this.maxPage) {this.page++; this.listComments(); } else {prompt. ShowToast ({message: "already on the bottom ", duration: 3000})}}, // page request comment listComments() {fetch. this.url + "/list? goodsId=" + this.id + "pageNo=" + this.page, responseType: "json", success: res = { console.info(res.data); let data = JSON.parse(res.data); if (0 ! = data.code) {prompt. ShowToast ({message: "service error ", duration: 3000 }) } else { data.data.list.forEach(ele = { this.comments.push(ele); }); this.page = data.data.page; this.maxPage = data.data.maxPage; }}})}Copy the code

On the server side, ten pages of data are returned per request, along with the current page count and total page count.

2, list back to top

If you want to go back to the first comment after reviewing some of the comments, there's a "Back to the top" button that scrolls to the top of the list.

In the official documentation for the List component, there is no mention of how to do this. However, after retrieving a component instance in JS, there are several apis to call:

We can use scrollTop() to scroll the list to the top.

this.$element("list").scrollTop();
Copy the code

This doesn't work, although the source code comments seem to mean smooth defaults to false.

Smooth is false, can go back to the top, but is a bit stiff.

this.$element("list").scrollTop({
    smooth: false
});
Copy the code

Smooth: True, still good.

Button use type="circle", you can specify icon, realize the icon button.

HML View layer:

button onclick="toTop" type="circle" icon="/common/totop.png"/button
Copy the code

CSS rendering layer:

button {
    position: fixed;
    right: 20px;
    bottom: 20px;
    background-color: #eeeeee;
}
Copy the code

Js logic layer:

    toTop() {
        this.$element("list").scrollTop({
            smooth: true
        });
    },
Copy the code

Author: Chris.

Want to know more, please visit: 51 cto and huawei officials strategic cooperation HongMeng technology community at https://harmonyos.51cto.com

Search
About
mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.