//uni小程序-上拉加载和下拉刷新/以及scroll-view无法触发onReachBottom 和安卓不兼容等问题
先说上拉加载:(一般加载分页数据/
第一种方法:onReachBottom(){}‘
//例如:
onReachBottom() {
console.log('上拉加载事件');
var that = this;
if (
that.listBx.length < that.listCount.totalRow &&
that.pageNum < that.listCount.totalPage
) {
setTimeout(() => {
that.pageNum++;
that.List();
}, 200);
} else {
that.bottomText = "已经全部加载完毕";
return;
}
}
//例如:
onReachBottom() {
console.log('上拉加载事件');
var that = this;
if (
that.listBx.length < that.listCount.totalRow &&
that.pageNum < that.listCount.totalPage
) {
setTimeout(() => {
that.pageNum++;
that.List();
}, 200);
} else {
that.bottomText = "已经全部加载完毕";
return;
}
}
第二种方法:(主要是因为页面中有可滑动的tab选项卡,所以导致onReachBottom和scroll-view还有安卓机中onReachBottom失效不兼容的原因)
钻研半天终于得出这第二中方法在scroll-view 中写入 @scrolltolower="loadMore(index1)"
Xnip2020-08-27_19-45-17.jpg
//例如
<scroll-view
class="swiper-one-list"
scroll-y="true"
@scrolltolower="loadMore(index1)"//滚动到底部/右边，会触发 scrolltolower 事件
refresher-enabled="true"//开启自定义下拉刷新
:refresher-triggered="triggered"//设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
@refresherrefresh="onRefresh"//自定义下拉刷新被触发
>
//
loadMore: function(tabIndex) {
var that = this;
console.log(that.listBx.length, that.listCount.totalRow);
if (
that.listBx.length < that.listCount.totalRow &&
that.pageNum < that.listCount.totalPage
) {
setTimeout(() => {
that.pageNum++;
that.List();//再次加载分页数据
}, 200);
} else {
that.bottomText = "已经全部加载完毕";
return;
}
},
//例如
<scroll-view
class="swiper-one-list"
scroll-y="true"
@scrolltolower="loadMore(index1)"//滚动到底部/右边，会触发 scrolltolower 事件
refresher-enabled="true"//开启自定义下拉刷新
:refresher-triggered="triggered"//设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
@refresherrefresh="onRefresh"//自定义下拉刷新被触发
>
//
loadMore: function(tabIndex) {
var that = this;
console.log(that.listBx.length, that.listCount.totalRow);
if (
that.listBx.length < that.listCount.totalRow &&
that.pageNum < that.listCount.totalPage
) {
setTimeout(() => {
that.pageNum++;
that.List();//再次加载分页数据
}, 200);
} else {
that.bottomText = "已经全部加载完毕";
return;
}
},
///这是调取分页数据的接口的
import { comBxList } from "@/api/api"; //报修列表
export default {
data() {
return {
scrollLeft: 0,
listBx: [], //数据
listCount: {}, //总个数
bottomText: "",
loginInfo: {},
num: 0,
pageSize: 10, //当前页面数量
pageNum: 1, //当前页码
menuTabs: [
{
name: "待接单",
},
{
name: "待维修",
},
{
name: "已修复",
},
{
name: "已取消",
},
],
swiperDateList: [[], [], [], []],
triggered: false,
_freshing: false,
};
},
List() {
comBxList({
order: "id desc",
applicantId: this.loginInfo.id, //提交人部门id
formState: this.num, //故障位置
pageSize: this.pageSize,
pageNum: this.pageNum,
}).then((res) => {
console.log(res, "reeee报修列表");
if (this.pageNum == 1) {
this.listBx = res.data;
} else {
this.listBx = this.listBx.concat(res.data);
}
this.listCount = res.basicPageInfo;
if (this.listCount.totalRow == 0) {
this.bottomText = "";
} else if (10 >= this.listCount.totalRow > 0) {
this.bottomText = "已经全部加载完毕";
} else if (this.listBx.length < this.listCount.totalRow) {
this.bottomText = "正在加载更多数据...";
}
});
},
import { comBxList } from "@/api/api"; //报修列表
export default {
data() {
return {
scrollLeft: 0,
listBx: [], //数据
listCount: {}, //总个数
bottomText: "",
loginInfo: {},
num: 0,
pageSize: 10, //当前页面数量
pageNum: 1, //当前页码
menuTabs: [
{
name: "待接单",
},
{
name: "待维修",
},
{
name: "已修复",
},
{
name: "已取消",
},
],
swiperDateList: [[], [], [], []],
triggered: false,
_freshing: false,
};
},
List() {
comBxList({
order: "id desc",
applicantId: this.loginInfo.id, //提交人部门id
formState: this.num, //故障位置
pageSize: this.pageSize,
pageNum: this.pageNum,
}).then((res) => {
console.log(res, "reeee报修列表");
if (this.pageNum == 1) {
this.listBx = res.data;
} else {
this.listBx = this.listBx.concat(res.data);
}
this.listCount = res.basicPageInfo;
if (this.listCount.totalRow == 0) {
this.bottomText = "";
} else if (10 >= this.listCount.totalRow > 0) {
this.bottomText = "已经全部加载完毕";
} else if (this.listBx.length < this.listCount.totalRow) {
this.bottomText = "正在加载更多数据...";
}
});
},
以上是上拉加载的两种方式!
接下来写下拉刷新!
=》
下拉刷新
第一种方式:onPullDownRefresh(){}
//首先app.json:
"enablePullDownRefresh": true
//stopPullDownRefresh停止停止下拉刷新效果
onPullDownRefresh: function() {
console.log("下拉刷新页面");
this.pageSize = 10; //当前页面数量
this.pageNum = 1; //当前页码
this.List();//同上文List()
setTimeout(() => {
uni.stopPullDownRefresh(); //停止刷新
}, 1000);
},
//首先app.json:
"enablePullDownRefresh": true
//stopPullDownRefresh停止停止下拉刷新效果
onPullDownRefresh: function() {
console.log("下拉刷新页面");
this.pageSize = 10; //当前页面数量
this.pageNum = 1; //当前页码
this.List();//同上文List()
setTimeout(() => {
uni.stopPullDownRefresh(); //停止刷新
}, 1000);
},
第二种:(原因也是头部tab选项卡导致原生第一种onPullDownRefresh刷新看起来 像是整个页面刷新而不是列表刷新,产品说不好看!!本落魄前端只能改咯!!!
<swiper-item>
<scroll-view
class="swiper-one-list"
scroll-y="true"
@scrolltolower="loadMore(index1)"//滚动到底部/右边，会触发 scrolltolower 事件
refresher-enabled="true"//开启自定义下拉刷新
:refresher-triggered="triggered"//设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
@refresherrefresh="onRefresh"//自定义下拉刷新被触发
>
<swiper-item>
<scroll-view
class="swiper-one-list"
scroll-y="true"
@scrolltolower="loadMore(index1)"//滚动到底部/右边，会触发 scrolltolower 事件
refresher-enabled="true"//开启自定义下拉刷新
:refresher-triggered="triggered"//设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
@refresherrefresh="onRefresh"//自定义下拉刷新被触发
>
!!!
以上不懂的可以查看uni官网对scroll-view的描述
https://uniapp.dcloud.io/component/scroll-view
triggered: false,
_freshing: false,
onRefresh() {
console.log("pulling1------自定义下拉刷新被触发--维修---页面-");
if (this._freshing) return;
this._freshing = true;
if (!this.triggered) {
//界面下拉触发，triggered可能不是true，要设为true
this.triggered = true;
}
this.pageNum = 1;
this.List();//这里调用的就是刷新数据的方法
setTimeout(() => {
this.triggered = false;
this._freshing = false;
}, 500);
},
triggered: false,
_freshing: false,
onRefresh() {
console.log("pulling1------自定义下拉刷新被触发--维修---页面-");
if (this._freshing) return;
this._freshing = true;
if (!this.triggered) {
//界面下拉触发，triggered可能不是true，要设为true
this.triggered = true;
}
this.pageNum = 1;
this.List();//这里调用的就是刷新数据的方法
setTimeout(() => {
this.triggered = false;
this._freshing = false;
}, 500);
},
Xnip2020-08-27_20-07-54.jpg
网友评论