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

Chris.
发布于 2021-2-19 11:21
浏览
4收藏

1、list加载更多

如果在list中需要展示的数据非常多,那么一次性获取全部数据并显示,对于后端服务器和前段渲染的性能都是很大的负担,浪费资源且页面加载速度会很慢。

在网页端做分页普遍是用户点击“上一页”,“下一页”进行翻页,而移动端设备一般是在滑动到页面底端后加载下一页数据,并将数据接在列表底部。在list组件中,可以通过onscrollbottom属性绑定事件并处理。

从微信小程序到鸿蒙js开发【13】——list加载更多&回到顶部-鸿蒙开发者社区

视觉效果上来看数据是连续的,但其中已经触发了一次翻页。

从微信小程序到鸿蒙js开发【13】——list加载更多&回到顶部-鸿蒙开发者社区

list部分 hml视图层:

    <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>

css渲染层:

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;
}

js逻辑层:

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;
                }
            }
        })
    }

在服务器端,每次请求返回十条数据,以及当前页数、总页数。

从微信小程序到鸿蒙js开发【13】——list加载更多&回到顶部-鸿蒙开发者社区

 

2、list回到顶部

查看了一部分评论后,如果想要回到第一条评论的位置,需有一个“回到顶部”按钮,点击后列表自动滚动到最顶部。

在官方文档list组件中,未提到如何实现这样的功能。但在js中获取组件实例后,有这么几个API可供调用:

从微信小程序到鸿蒙js开发【13】——list加载更多&回到顶部-鸿蒙开发者社区

猜测是可以使list滚动,我们使用scrollTop(),使列表滚动到最顶端。

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

从微信小程序到鸿蒙js开发【13】——list加载更多&回到顶部-鸿蒙开发者社区这样是不起作用的,虽然源代码注释的意思似乎是smooth默认为false。

从微信小程序到鸿蒙js开发【13】——list加载更多&回到顶部-鸿蒙开发者社区

smooth为false的效果,可以回到顶部,但比较生硬。

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

从微信小程序到鸿蒙js开发【13】——list加载更多&回到顶部-鸿蒙开发者社区smooth: true的效果,还是不错的。

从微信小程序到鸿蒙js开发【13】——list加载更多&回到顶部-鸿蒙开发者社区按钮使用type="circle",便可指定icon,实现图标按钮。

hml视图层:

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

css渲染层:

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

js逻辑层:

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

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2021-2-19 11:21:39修改
7
收藏 4
回复
举报
6条回复
按时间正序
/
按时间倒序
张荣超_九丘教育
张荣超_九丘教育

好文👍👍👍

1
回复
2021-2-19 19:37:22
Whyalone
Whyalone
this.$element("list").scrollTop({
            smooth: true
        });

始终感觉用JSON定义参数不够优雅,不够JS。

回复
2021-2-20 10:09:07
Chris.
Chris. 回复了 Whyalone
this.$element("list").scrollTop({ smooth: true }); 始终感觉用JSON定义参数不够优雅,不够JS。

我猜测是为了避免参数过多,采用对象来封装

回复
2021-2-20 10:59:17
鲜橙加冰
鲜橙加冰

看上去有点像知乎了。

回复
2021-2-20 13:39:48
入门大师小波哥
入门大师小波哥

好文好文

回复
2021-8-27 09:04:48
爱吃土豆丝的打工人
爱吃土豆丝的打工人

学习学习

回复
2021-8-27 09:37:52
回复