从微信小程序到鸿蒙js开发【13】——list加载更多&回到顶部 原创 精华

    <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>
    </list>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

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;
}
.title>text {
    height: 50px;
    line-height: 50px;
}
rating {
    width: 150px;
    height: 50px;
}
.content {
    margin: 10px 20px 10px 20px;
    font-size: 30px;
    color: #333333;
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.

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: "已经到底啦",
                duration: 3000
            })
        }
    },
    // 分页请求评论
    listComments() {
        fetch.fetch({
            url: 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: "服务错误",
                        duration: 3000
                    })
                } else {
                    data.data.list.forEach(ele => {
                        this.comments.push(ele);
                    });
                    this.page = data.data.page;
                    this.maxPage = data.data.maxPage;
                }
            }
        })
    }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.

this.$element("list").scrollTop();
1.

this.$element("list").scrollTop({
    smooth: false
});
1.
2.
3.

<button onclick="toTop" type="circle" icon="/common/totop.png"></button>
1.

button {
    position: fixed;
    right: 20px;
    bottom: 20px;
    background-color: #eeeeee;
}
1.
2.
3.
4.
5.
6.

    toTop() {
        this.$element("list").scrollTop({
            smooth: true
        });
    },
1.
2.
3.
4.
5.