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

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

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

https://harmonyos.

1、list加载更多

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

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

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

list部分 hml视图层：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.      
    3. 
  
  
  
  
  3.          
    4. 
  
  
  
  
  4.             
     
    5. 
  
  
  
  
  5.                  
    6. 
  
  
  
  
  6.                  
    7. 
  
  
  
  
  7.                      
    8. 
  
  
  
  
  8.                         {{ $item.user.username }} 
    9. 
  
  
  
  
  9.                      
    10. 
  
  
  
  
  10.                      
    11. 
  
  
  
  
  11.                         {{ $item.date }} 
    12. 
  
  
  
  
  12.                      
    13. 
  
  
  
  
  13.                 
 
  •                  
  •             
    •  
  •              
  •                 {{ $item.content }} 
  •              
  •          
  •      
  •  

    • css渲染层：

     
 
 
 
      
  
  
  
  
    1. list { 
      2. 
  
  
  
  
    2.     width: 100%; 
      3. 
  
  
  
  
    3.     height: 1400px; 
      4. 
  
  
  
  
    4. } 
      5. 
  
  
  
  
    5. list-item { 
      6. 
  
  
  
  
    6.     width: 100%; 
      7. 
  
  
  
  
    7.     border-bottom: 1px solid #bbbbbb; 
      8. 
  
  
  
  
    8.     background-color: #fdfdfd; 
      9. 
  
  
  
  
    9.     margin-bottom: 10px; 
      10. 
  
  
  
  
    10.     display: flex; 
      11. 
  
  
  
  
    11.     flex-direction: column; 
      12. 
  
  
  
  
    12.     padding: 10px 0 10px 0; 
      13. 
  
  
  
  
    13. } 
      14. 
  
  
  
  
    14. list-item image { 
      15. 
  
  
  
  
    15.     width: 60px; 
      16. 
  
  
  
  
    16.     height: 60px; 
      17. 
  
  
  
  
    17.     border-radius: 30px; 
      18. 
  
  
  
  
    18.     margin-left: 20px; 
      19. 
  
  
  
  
    19.     margin-top: 20px; 
      20. 
  
  
  
  
    20.     object-fit: contain; 
      21. 
  
  
  
  
    21. } 
      22. 
  
  
  
  
    22. .title { 
      23. 
  
  
  
  
    23.     margin-left: 20px; 
      24. 
  
  
  
  
    24.     height: 100px; 
      25. 
  
  
  
  
    25.     display: flex; 
      26. 
  
  
  
  
    26.     flex-direction: column; 
      27. 
  
  
  
  
    27.     width: 450px; 
      28. 
  
  
  
  
    28. } 
      29. 
  
  
  
  
    29. .title>text { 
      30. 
  
  
  
  
    30.     height: 50px; 
      31. 
  
  
  
  
    31.     line-height: 50px; 
      32. 
  
  
  
  
    32. } 
      33. 
  
  
  
  
    33. rating { 
      34. 
  
  
  
  
    34.     width: 150px; 
      35. 
  
  
  
  
    35.     height: 50px; 
      36. 
  
  
  
  
    36. } 
      37. 
  
  
  
  
    37. .content { 
      38. 
  
  
  
  
    38.     margin: 10px 20px 10px 20px; 
      39. 
  
  
  
  
    39.     font-size: 30px; 
      40. 
  
  
  
  
    40.     color: #333333; 
      41. 
  
  
  
  
    41. } 
      42.

    js逻辑层：

     
 
 
 
      
  
  
  
  
    1. import fetch from '@system.fetch'; 
      2. 
  
  
  
  
    2. import prompt from '@system.prompt'; 
      3. 
  
  
  
  
    3.  
      4. 
  
  
  
  
    4. export default { 
      5. 
  
  
  
  
    5.     data: { 
      6. 
  
  
  
  
    6.         ...... 
      7. 
  
  
  
  
    7.         comments: [], 
      8. 
  
  
  
  
    8.         page: 1, 
      9. 
  
  
  
  
    9.         maxPage: 1 
      10. 
  
  
  
  
    10.     }, 
      11. 
  
  
  
  
    11.     onInit() { 
      12. 
  
  
  
  
    12.         this.listComments(); 
      13. 
  
  
  
  
    13.     }, 
      14. 
  
  
  
  
    14.     // list触底加载下一页数据 
      15. 
  
  
  
  
    15.     loadMore() { 
      16. 
  
  
  
  
    16.         if (this.page < this.maxPage) { 
      17. 
  
  
  
  
    17.             this.page++; 
      18. 
  
  
  
  
    18.             this.listComments(); 
      19. 
  
  
  
  
    19.         } else { 
      20. 
  
  
  
  
    20.             prompt.showToast({ 
      21. 
  
  
  
  
    21.                 message: "已经到底啦", 
      22. 
  
  
  
  
    22.                 duration: 3000 
      23. 
  
  
  
  
    23.             }) 
      24. 
  
  
  
  
    24.         } 
      25. 
  
  
  
  
    25.     }, 
      26. 
  
  
  
  
    26.     // 分页请求评论 
      27. 
  
  
  
  
    27.     listComments() { 
      28. 
  
  
  
  
    28.         fetch.fetch({ 
      29. 
  
  
  
  
    29.             url: this.url + "/list?goodsId=" + this.id + "&pageNo=" + this.page, 
      30. 
  
  
  
  
    30.             responseType: "json", 
      31. 
  
  
  
  
    31.             success: res => { 
      32. 
  
  
  
  
    32.                 console.info(res.data); 
      33. 
  
  
  
  
    33.                 let data = JSON.parse(res.data); 
      34. 
  
  
  
  
    34.                 if (0 != data.code) { 
      35. 
  
  
  
  
    35.                     prompt.showToast({ 
      36. 
  
  
  
  
    36.                         message: "服务错误", 
      37. 
  
  
  
  
    37.                         duration: 3000 
      38. 
  
  
  
  
    38.                     }) 
      39. 
  
  
  
  
    39.                 } else { 
      40. 
  
  
  
  
    40.                     data.data.list.forEach(ele => { 
      41. 
  
  
  
  
    41.                         this.comments.push(ele); 
      42. 
  
  
  
  
    42.                     }); 
      43. 
  
  
  
  
    43.                     this.page = data.data.page; 
      44. 
  
  
  
  
    44.                     this.maxPage = data.data.maxPage; 
      45. 
  
  
  
  
    45.                 } 
      46. 
  
  
  
  
    46.             } 
      47. 
  
  
  
  
    47.         }) 
      48. 
  
  
  
  
    48.     } 
      49.

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

    2、list回到顶部

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

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

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

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

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

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

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

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

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

    hml视图层：

     
 
 
 
      
  
  
  
  
    1.  
      2.

    css渲染层：

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

    js逻辑层：

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

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

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

    https://harmonyos.

    网站标题：从微信小程序到鸿蒙JS开发-list加载更多&回到顶部
    分享网址：http://www.shufengxianlan.com/qtweb/news21/341871.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    服务器托管知识

    同城分类信息

    快照排名　　 　高端定制网站设计　　 　成都营销型网站建设　　 　网站制作　　 　济桢教育　　 　域名注册　　 　手机网站开发　　 　成都IDC机房托管　　 　重庆企业网站建设　　 　广告媒介投放　　 　德阳服务器托管　　 　商城网站建设　　 　不锈钢防护栏　　 　成都西信机房　　 　服务器机柜　　 　手机网站建设公司　　 　重庆服务器托管　　 　川银永信　　 　西云服务器托管　　 　彭州网站建设