日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
從微信小程序到鴻蒙JS開發(fā)-list加載更多&回到頂部

想了解更多內(nèi)容，請(qǐng)?jiān)L問：

和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.

1、list加載更多

如果在list中需要展示的數(shù)據(jù)非常多，那么一次性獲取全部數(shù)據(jù)并顯示，對(duì)于后端服務(wù)器和前段渲染的性能都是很大的負(fù)擔(dān)，浪費(fèi)資源且頁(yè)面加載速度會(huì)很慢。

在網(wǎng)頁(yè)端做分頁(yè)普遍是用戶點(diǎn)擊“上一頁(yè)”，“下一頁(yè)”進(jìn)行翻頁(yè)，而移動(dòng)端設(shè)備一般是在滑動(dòng)到頁(yè)面底端后加載下一頁(yè)數(shù)據(jù)，并將數(shù)據(jù)接在列表底部。在list組件中，可以通過onscrollbottom屬性綁定事件并處理。

視覺效果上來看數(shù)據(jù)是連續(xù)的，但其中已經(jīng)觸發(fā)了一次翻頁(yè)。

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觸底加載下一頁(yè)數(shù)據(jù) 
      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: "已經(jīng)到底啦", 
      22. 
  
  
  
  
    22.                 duration: 3000 
      23. 
  
  
  
  
    23.             }) 
      24. 
  
  
  
  
    24.         } 
      25. 
  
  
  
  
    25.     }, 
      26. 
  
  
  
  
    26.     // 分頁(yè)請(qǐng)求評(píng)論 
      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: "服務(wù)錯(cuò)誤", 
      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.

    在服務(wù)器端，每次請(qǐng)求返回十條數(shù)據(jù)，以及當(dāng)前頁(yè)數(shù)、總頁(yè)數(shù)。

    2、list回到頂部

    查看了一部分評(píng)論后，如果想要回到第一條評(píng)論的位置，需有一個(gè)“回到頂部”按鈕，點(diǎn)擊后列表自動(dòng)滾動(dòng)到最頂部。

    在官方文檔list組件中，未提到如何實(shí)現(xiàn)這樣的功能。但在js中獲取組件實(shí)例后，有這么幾個(gè)API可供調(diào)用：

    猜測(cè)是可以使list滾動(dòng)，我們使用scrollTop()，使列表滾動(dòng)到最頂端。

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

    這樣是不起作用的，雖然源代碼注釋的意思似乎是smooth默認(rèn)為false。

    smooth為false的效果，可以回到頂部，但比較生硬。

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

    smooth: true的效果，還是不錯(cuò)的。

    按鈕使用type="circle"，便可指定icon，實(shí)現(xiàn)圖標(biāo)按鈕。

    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.

    想了解更多內(nèi)容，請(qǐng)?jiān)L問：

    和華為官方合作共建的鴻蒙技術(shù)社區(qū)

    https://harmonyos.


    標(biāo)題名稱：從微信小程序到鴻蒙JS開發(fā)-list加載更多&回到頂部
    文章網(wǎng)址：http://www.dlmjj.cn/article/ccepjcs.html