阅读量:4
<scroll-view :style="'height:' + scrollViewH + 'px;'" scroll-y="true" @scrolltolower="onReachLower"> <uni-collapse ref="collapse" v-model="value" v-for="el in listData" :key="el.id"> <uni-collapse-item :title="el.stationname" titleBorder="none"> <view class="info-content" @click="showInfo(el)"> <p>{{el.warntime}} {{el.warninfo}}</p> </view> </uni-collapse-item> </uni-collapse> <uni-load-more v-if="showLoadMore" :status="loadStatus" :content-text="contentText"></uni-load-more> </scroll-view> export default { 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 = true if(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); // 合并下一页数据 } }) }, } } 