一般に、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>
注:
このボックスの高さは画面の高さより 5 ピクセルまたは 10 ピクセル高くする必要があります。そうしないとスクロール バーがなく、スクロール バーがないと onReachBottom の底付けメソッドはトリガーされません。データの高さが最初に
照会されること データの高さが画面の高さより高い場合は、当然スクロール バーが表示されます。このボックスは画面の高さと直接同じです。
データが10 未満で画面いっぱいにならない場合は、ボックスを画面の高さより少し高く設定する必要があります。
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、スクロールビューコンポーネントがプルアップしてさらにロードします（固定ヘッダー）
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、一部の Android モデルではスクロールビューをトリガーするのが困難です
2 番目の方法は iOS では問題ありませんが、一部の Android ではプルアップをトリガーしてさらにロードすることが困難です。
解決策:
@scrollto lowerメソッドを@scroll
に置き換えます @scrollto lower メソッドは、スクロール ビューが下部に接触するとトリガーされます。これは、画面の下部ではなく、スクロール ビュー コンポーネントの下部に接触します。@scroll メソッドは次のとおりです
。スクロールビューコンポーネントがスライドしている限り、このメソッドがトリガーされます。
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();
}
}
})
},
},
わかりました、もうやめてください、記録してください、どこが間違っているかを指摘してください、ありがとう、次号でお会いしましょう!!!