【uniApp】实现列表下拉触底加载更多功能

<scroll-view:style="'height:' + scrollViewH + 'px;'"scroll-y="true"@scrolltolower="onReachLower"><uni-collapseref="collapse"v-model="value"v-for="el in listData":key="el.id"><uni-collapse-item:title="el.stationname"titleBorder="none"><viewclass="info-content"@click="showInfo(el)"><p>{{el.warntime}} &nbsp;&nbsp;{{el.warninfo}}</p></view></uni-collapse-item></uni-collapse><uni-load-morev-if="showLoadMore":status="loadStatus":content-text="contentText"></uni-load-more></scroll-view>

exportdefault{data(){return{params:{pageNum:1,// 页码pageSize:10// 条数},listData:[],// 当前页列表数据// 下拉加载allListCount:0,// 列表总数allListData:[],// 列表所有数据scrollViewH:0,// 列表滚动区域showLoadMore:false,loadStatus:"more",contentText:{contentdown:'查看更多',contentrefresh:'加载中……',contentnomore:'已全部加载'}}},onLoad(){this.getScrollHeight()this.getList()},methods:{// 获取屏幕高度getScrollHeight(){let self =this;
                uni.getSystemInfo({success(res){
                        self.scrollViewH = res.windowHeight -120;// 120为页面中我查询条件高度，根据实现情况调整}});},// 滚动到底部显示加载状态onReachLower(){this.showLoadMore =trueif(this.listData.length >=this.allListCount){this.loadStatus ="noMore"}else{this.loadStatus ="loading"setTimeout(()=>{this.params.pageNum ++;this.loadMore();},1000)}},// 根据接口获取列表数据，此处为后端分页，可根据实际情况改为前端分页getList(){this.$api.getDataByAjax(url,'GET',this.params).then((res)=>{if(res.code ===200&& res.data){this.allListCount = res.data.count
                    this.listData = res.data
                }})},// 加载更多loadMore(){this.$api.getDataByAjax(url,'GET',this.params).then((res)=>{if(res.code ===200&& res.data){this.listData =this.listData.concat(res.data);// 合并下一页数据}})},}}