uniapp scroll-view 上下滑动（【uniapp】上拉触底加载更多的两种方式,组件里面和页面里面 scroll-view组件和onReachBottom触底方法,以及部分安卓机型scroll-view很难触发问题,且可以固定表头）

一般的话scroll-view在组件里面使用,而页面里面则使用onReachBottom()这个方法居多

1,onReachBottom 上拉触底后加载更多(未固定表头)

页面结构:

<view class="box"> <table border="0"> <thead> <th>名称</th> <th style="width: 50px;">状态</th> <th>上传时间</th> <th style="width: 60px;">重量(kg)</th> <th style="width: 50px;">类型</th> </thead> <tr v-for="(item,index) in utrData" :key="index" class="trs"> <td>{{item.name}}</td> <td>{{item.flag}}</td> <td>{{item.createDt}}</td> <td>{{item.weight}}</td> <td>{{item.typeCode}}</td> </tr> </table> <view class="zwsj">{{ moreContent }}</view> </view>

注意:

这个box的height要比屏幕的高度高5px或者10px,要不然它不会出现滚动条,没有滚动条就不会触发onReachBottom 这个触底方法了

当然,如果你确保你的数据首次查询的高度比屏幕的高度还高,那它自然就出现滚动条了,这个box就直接等于屏幕的高度就行

如果要考虑数据少于10条,且没有撑满屏幕,那这个box还是设置比屏幕高度高一点比较好. export default { data() { return { utrData: [],//列表数组 pageNum: 1, // 页数 total: 0,//每页总数 flag: true, // 上拉加载开关 防止一次触底查询多次问题,防止数据查完后触底还调接口问题 moreContent: 上拉加载更多数据..., } }, methods: { //上拉加载更多 getMoreList(){ this.flag = true uni.request({ ... success:res => { if(res.data.status == 200){ this.flag = false let result = res.data.data || [] this.utrData = this.utrData.concat(result) if(result.length == 0 && this.pageNum == 1){ // 一开始就没有数据 this.moreContent = 暂无数据 }else{ this.total = result ? result.length : 0 if(this.total < 10){ // 只有一页数据,不足10条 this.moreContent = 数据已加载完,共 + this.utrData.length + 条 this.flag = true } // 有很多页 this.pageNum += 1 } }else{ this.moreContent = 暂无数据 uni.showToast({ title:res.data.message, icon:none }); } } }); }, }, //监听页面触底函数 onReachBottom(){ if(!this.flag){ this.getMoreList() } }, }

如果没效果,先测试onReachBottom有没有触发,一般触发了基本上就没什么问题了

2,scroll-view组件上拉加载更多(固定表头)

ui组件: uview2.0

如果你不想固定表头,就不用 -37 就可以了

wx.getSystemInfoSync().windowHeight 获取当前屏幕的高度 <view class="box" :style="{height: boxHeight + 48 + 37 + px}"> <view class="toptitle"> <u-icon name="list-dot" color="#00c9d5" size="28"></u-icon> <text>具体信息</text> </view> <view class="content"> <view class="thead"> <text>code</text> <text>时间</text> <text>重量(kg)</text> <text>类型</text> <text>状态</text> </view> <view class="tbody" :style="{height: boxHeight + px}" id="test"> <scroll-view scroll-y="true" lower-threshold="10" :style="{height: boxHeight + px}" @scrolltolower="scrolltolower"> <view class="tableData" :style="{height: boxHeight + 10 + px}"> <view v-for="(item, index) in tableArr" :key="index"> <text>{{ item.code }}</text> <text>{{ item.create_time }}</text> <text>{{ item.weight }}</text> <text>{{ item.type }}</text> <text>{{ item.location}}</text> </view> <view style="color: #aaa;"> <text>{{loadingContent}}</text> </view> </view> </scroll-view> </view> </view> </view> export default { data() { return { tableArr: [], boxHeight: wx.getSystemInfoSync().windowHeight - 48 - 37, loadingContent: 上拉加载更多数据..., total: 0, // 每页总数 pageNum: 1,// 页数 flag: true, // 控制上拉翻页 testHeight: 0 } }, methods: { // 页面滚动触发 scrolltolower(e) { if(!this.flag){ this.getTable() } }, // 查询表格 getTable(){ let params = { p: this.pageNum } this.$get(xxx, params).then(res =>{ this.flag = true let result = res.lsit || [] this.tableArr = this.tableArr.concat(result) if(result.length == 0 && this.pageNum == 1){ // 一开始就没数据 this.loadingContent = 暂无数据 }else{ this.total = result ? result.length : 0 if(this.total < 10){ this.moreContent = 数据已加载完,共 + this.utrData.length + 条 this.flag = true } this.flag = false this.pageNum += 1 } }) }, }, }

3,scroll-view 部分安卓机型很难触发问题

ios用第二种方法没有问题,部分安卓用的话很难触发上拉加载更多,为什么部分安卓很难触发就不说了,自行百度

解决:

@scrolltolower 方法替换为 @scroll

@scrolltolower 方法是 scroll-view触底了就会触发,是触scroll-view组件的底部,不是触屏幕的底部

@scroll 方法是只要 scroll-view组件滑动了,就会触发这个方法 methods: { // 页面滚动触发 scrolltolower(e) { // 距离底部<100 并且是往上滑的动作 if(e.detail.scrollHeight - e.detail.scrollTop - this.testHeight <= 100 && this.flag && e.detail.deltaY < 0){ this.flag = false this.getTable() } }, // 查询表格 getTable(){ let params = { p: this.pageNum } this.$get(xxx, params).then(res =>{ this.flag = true let result = res.lsit || [] if(result.length == 0 && this.pageNum == 1){ // 一开始就没数据 this.loadingContent = 暂无数据 this.flag = false }else{ this.pageNum += 1 this.total = result ? result.length : 0 if(this.total < 10){ this.moreContent = 数据已加载完,共 + this.utrData.length + 条 this.flag = false } this.tableArr = this.tableArr.concat(result) if(this.testHeight==0){ let view = uni.createSelectorQuery().in(this).select("#test") view.fields({ size: true, scrollOffset: true }, data => { this.testHeight=data.height }).exec(); } } }) }, },

ok,没了,记录一下,哪里写的不对还请指出,谢谢,下期再见! ! !