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

时间：2023-03-15 20:43:32 科技观察

更多信息请访问：与华为官方共建的鸿蒙技术社区https://harmonyos.51cto.com1、列表加载更多。如果列表中需要展示的数据很多，那么一次获取并展示所有的数据，对后端服务器和前端渲染的性能都会有很大的负担，浪费资源，拖慢速度页面加载速度。网页的分页一般是用户点击“上一页”和“下一页”翻页，而移动设备一般是滑动到页面底部后加载下一页的数据，并将数据连接到列表底部。在列表组件中，可以通过onscrollbottom属性来绑定和处理事件。从视觉效果上看，数据是连续的，但是已经触发了翻页。列表部分hml视图层：

{{$item.content}}CSS漂染层：list{width:100%;height:1400px;}list-item{width:100%;border-bottom:1pxsolid#bbbbbb;background-color:#fdfdfd;margin-bottom:10px;display:flex;flex-direction:column;padding:10px010px0;}list-itemimage{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:10px20px10px20px;font-size:30px;color:#333333;}js逻辑层:importfetchfrom'@system.fetch';importpromptfrom'@system.prompt';exportdefault{data:{...comments:[],page:1,maxPage:1},onInit(){this.listComments();},//list触底加载下一页数据loadMore(){if(this.page{console.info(res.data);letdata=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，列表回到顶部查看看完一些评论后，如果想回到第一条评论的位置，需要一个“返回顶部”按钮，点击后列表会自动滚动到顶部。在官方文档列表组件中，并没有提到如何实现这样的功能。但是在js中拿到组件实例后，有几个API可以调用：猜猜列表可以滚动，我们使用scrollTop()将列表滚动到顶部。this.$element("list").scrollTop();这个不行，虽然源码注释的意思好像是smooth默认是false。平滑为假的效果可以回到顶部，但相对生硬。this.$element("list").scrollTop({smooth:false});smooth:true的效果还是不错的。按钮使用type="circle"指定一个图标来实现图标按钮。Hml视图层：css渲染层：button{position:fixed;right:20px;bottom:20px;background-color:#eeeeee;}js逻辑层：toTop(){this.$element("list").scrollTop({smooth:true});}，更多内容请访问：与华为鸿蒙技术社区共建https://harmonyos.51cto.com

上一篇：如何写出更稳定的Python代码？

下一篇：iOS15正式版下周推出，可惜通用控制功能还要再等等

从微信小程序到鸿蒙JS开发-列表加载更多&返回顶部相关文章