[[383590]]

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

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

https://harmonyos.51cto.com

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組件中，可以通過(guò)onscrollbottom屬性綁定事件并處理。

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

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觸底加載下一頁(yè)數(shù)據(jù) 
    loadMore() { 
        if (this.page < this.maxPage) { 
            this.page++; 
            this.listComments(); 
        } else { 
            prompt.showToast({ 
                message: "已經(jīng)到底啦", 
                duration: 3000 
            }) 
        } 
    }, 
    // 分頁(yè)請(qǐng)求評(píng)論 
    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: "服務(wù)錯(cuò)誤", 
                        duration: 3000 
                    }) 
                } else { 
                    data.data.list.forEach(ele => { 
                        this.comments.push(ele); 
                    }); 
                    this.page = data.data.page; 
                    this.maxPage = data.data.maxPage; 
                } 
            } 
        }) 
    } 

在服務(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)到最頂端。

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

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

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

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

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

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

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

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

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

https://harmonyos.51cto.com