uni-app上拉加载
1).通过在pages.json文件中找到当前页面的pages节点下style中配置onReachBottomDistance可以设置距离底部开启加载的距离,默认为50px。
{
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path" : "pages/pull-up/pull-up",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"onReachBottomDistance": 120
}
},
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}
2).通过onReachBottom监听到触底的行为
<template>
<view>
<view v-for="(item, index) in list" :key="index" class="box-item">
{{item}}
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: ['java', '前端', '微服务', '大数据', '大数据1', '大数据2', '大数据3', '大数据4', '大数据5', '大数据6', '大数据7', '大数据8', '大数据9', '大数据10']
}
},
onReachBottom () {
console.log('触底了');
this.list = [...this.list, ...['大数据11', '大数据12', '大数据13', '大数据14', '大数据15', '大数据16', '大数据17', '大数据16', '大数据18']]
},
methods: {
}
}
</script>
<style>
.box-item {
height: 100px;
line-height: 100px;
}
</style>
效果如下: