文章详情

登录

短信预约-IT技能 免费直播动态提醒

• 地区
• 手机号
• 验证码获取验证

立即预约

选择考试省份

• 北京
• 上海
• 天津
• 重庆
• 河北
• 山东
• 辽宁
• 黑龙江
• 吉林
• 甘肃
• 青海
• 河南
• 江苏
• 湖北
• 湖南
• 江西
• 浙江
• 广东
• 云南
• 福建
• 海南
• 山西
• 四川
• 陕西
• 贵州
• 安徽
• 广西
• 内蒙
• 西藏
• 新疆
• 宁夏
• 兵团

请输入下面的图形验证码

提交验证

短信预约提醒成功

从微信小程序到鸿蒙JS开发-list加载更多&回到顶部

2024-12-03 10:29

关注

想了解更多内容，请访问：

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

1、list加载更多

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

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

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

list部分 hml视图层：

"auto" scrolleffect="no" onscrollbottom="loadMore" id="list"> 
    for="{{ comments }}"> 
         
            
 
                "/common/user.png"> 
                "title"> 
                    "color: #333333; font-size: 32px;"> 
                        {{ $item.user.username }} 
                     
                    "color: #666666; font-size: 30px;"> 
                        {{ $item.date }} 
                     
                

 

                "5" rating="{{ $item.star }}" indicator="true"> 

            

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

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

2、list回到顶部

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

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

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

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

这样是不起作用的，虽然源代码注释的意思似乎是smooth默认为false。

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

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

smooth: true的效果，还是不错的。

按钮使用type="circle"，便可指定icon，实现图标按钮。

hml视图层：

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

css渲染层：

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

js逻辑层：

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

想了解更多内容，请访问：

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

首页课程

资料下载问答资讯