鸿蒙listview控件,鸿蒙js开发11：鸿蒙的分页滚动列表视图的实现

1.UI的实现效果

2.js业务逻辑部分

import prompt from '@system.prompt';

export default {

data: {

title: 'World',

//建议大家1.本地数据 2.网络数据

//为什么要分页？

// 分页会减少前端加载的负荷，提升页面执行的性能，带来良好的用户体验。

//100条数据，100条数据一次性加载，会带来浪费。

//如果从网络请求数据，分页会减轻服务器的压力和传输的压力。

// 移动端分页 ，加载更多

// 第几页，每页几条 固定10条，数组的内置的方法

listdatas:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,

21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36],

//第几页

currentnum:1,

//每页几条

fixednum:5,

//分页的数据结果集:

pagelists:[],

text:"加载更多",

flag:false

},

onInit()

{

this.showData(this.currentnum);

},

loaddata()

{

++this.currentnum;

this.showData(this.currentnum);

},

showData(curnum)

{

//36/5=7..1 8页

//三元运算符

let pageSize=this.listdatas.length%this.fixednum==0?

this.listdatas.length/this.fixednum:Math.floor(this.listdatas.length/this.fixednum)+1;

if(curnum>pageSize)

{

prompt.showToast({

message:"用户您好，数据已经到底了",

duration:4000

})

this.text="哥或妹,你好，我已经到底了";

this.flag=true;

}

else

{

//执行分页 第一个参数:从0开始 第二个参数:不到end (end-1)

this.pagelists=this.listdatas.slice(0,curnum*this.fixednum);

}

}

}

3.页面布局

4.样式部分

.container {

display: flex;

flex-direction: column;

width: 100%;

height: 1500px;

}

.topview{

width: 100%;

height: 10%;

background-color: powderblue;

position: fixed;

left: 0px;

top:0px;

}

.bottomview{

width: 100%;

height: 10%;

background-color: powderblue;

position: fixed;

left: 0px;

bottom:0px;

}

.contentview{

width: 100%;

height: 100%;

top:150px;

}

.listview{

width: 100%;

height: 100%;

}

.listitem{

width: 100%;

height: 15%;

border-bottom: 5px solid darkgray;

display: flex;

justify-content: center;

align-items: center;

}

.tv{

color: deepskyblue;

font-size: 35px;

font-weight: bold;

font-family: sans-serif;

}

.lastview{

width: 100%;

height: 25%;

background-color: #ff6a06;

display: flex;

justify-content: center;

align-items: center;

}

.tv1{

color: snow;

font-size: 30px;

font-weight: bold;

font-family: sans-serif;

}

.lastview1{

width: 100%;

height: 25%;

background-color: darkgray;

display: flex;

justify-content: center;

align-items: center;

}

5.最终效果