1、list加载更多
如果在list中需要展示的数据非常多，那么一次性获取全部数据并显示，对于后端服务器和前段渲染的性能都是很大的负担，浪费资源且页面加载速度会很慢。
在网页端做分页普遍是用户点击“上一页”，“下一页”进行翻页，而移动端设备一般是在滑动到页面底端后加载下一页数据，并将数据接在列表底部。在list组件中，可以通过onscrollbottom属性绑定事件并处理。
视觉效果上来看数据是连续的，但其中已经触发了一次翻页。
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>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
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;
}
- 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.
- 37.
- 38.
- 39.
- 40.
- 41.
js逻辑层：
import fetch from '@system.fetch';
import prompt from '@system.prompt';
export default {
data: {
......
comments: [],
page: 1,
maxPage: 1
},
onInit() {
this.listComments();
},
// list触底加载下一页数据
loadMore() {
if (this.page < this.maxPage) {
this.page++;
this.listComments();
} else {
prompt.showToast({
message: "已经到底啦",
duration: 3000
})
}
},
// 分页请求评论
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: "服务错误",
duration: 3000
})
} else {
data.data.list.forEach(ele => {
this.comments.push(ele);
});
this.page = data.data.page;
this.maxPage = data.data.maxPage;
}
}
})
}
- 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.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
在服务器端，每次请求返回十条数据，以及当前页数、总页数。
2、list回到顶部
查看了一部分评论后，如果想要回到第一条评论的位置，需有一个“回到顶部”按钮，点击后列表自动滚动到最顶部。
在官方文档list组件中，未提到如何实现这样的功能。但在js中获取组件实例后，有这么几个API可供调用：
猜测是可以使list滚动，我们使用scrollTop()，使列表滚动到最顶端。
this.$element("list").scrollTop();
- 1.
这样是不起作用的，虽然源代码注释的意思似乎是smooth默认为false。
smooth为false的效果，可以回到顶部，但比较生硬。
this.$element("list").scrollTop({
smooth: false
});
- 1.
- 2.
- 3.
smooth: true的效果，还是不错的。
按钮使用type="circle"，便可指定icon，实现图标按钮。
hml视图层：
<button onclick="toTop" type="circle" icon="/common/totop.png"></button>
- 1.
css渲染层：
button {
position: fixed;
right: 20px;
bottom: 20px;
background-color: #eeeeee;
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
js逻辑层：
toTop() {
this.$element("list").scrollTop({
smooth: true
});
},
- 1.
- 2.
- 3.
- 4.
- 5.
