vue- cube-scroll踩坑记
2024-10-21 18:30:58
坑：
- 下拉刷新，上拉加载一直处于加载中 --- 原因：未结束此次下拉或上拉 ---解决：forceUpdate()结束上拉或下拉
- 无法正常滚动 --- 原因：数据更新了，但页面高度未变化 ---解决：refresh()重新计算高度
- 上拉加载除了第一次，其他时候失效 --- 原因：上次上拉加载未结束，无法进行下一次下拉 ---解决：forceUpdate()结束上拉或下拉
<!--
* @Author: lingxie
* @Date: 2020-06-04 16:17:25
* @Descripttion:
-->
<template>
<div class="model-box">
<div class="page page-order page-order-list">
<!-- ### 列表 -->
<div class="order-list-wrapper" v-if="dataPage && dataPage.length > 0">
<cube-scroll
ref="scroll"
:options="options"
@pulling-down="onPullingDown"
@pulling-up="onPullingUp"
>
<ul class="order-list">
<li class="order-item" v-for="(i,idx) in dataPage" :key="idx">
{{i.orderNo}}
</li>
</ul> </cube-scroll>
</div> <!--缺省-->
<div class="noresult" v-else>
<img src="@order/empty.png" alt="">
<div>暂无订单</div>
</div>
</div>
</div>
</template> <script>
export default {
data() {
return {
options: {
pullDownRefresh: {
txt: "刷新成功"
},
pullUpLoad: {
// threshold: 100,
txt: {
more: "",
noMore: ""
}
}
},
page:true,
pageNo:1,
pageSize:10,
totalPage:'',//总页数量
dataPage: [],
};
},
beforeRouteEnter(to, from, next) {
next(vm=>{
vm.pageNo = 1;
vm.fetch_orderList(1);
})
},
methods: {
// 触发下拉刷新
onPullingDown() {
console.log('下拉刷新--------------');
this.pageNo = 1;
this.fetch_orderList(1);
if(this.$refs && this.$refs.scroll){
this.$refs.scroll.forceUpdate();
this.$refs.scroll.refresh();
}
},
// 触发上拉加载更多
onPullingUp() {
console.log("上拉加载------------");
if(this.pageNo >= this.totalPage){
window.$utils.msg.warn("没有更多数据啦");
this.$refs.scroll.forceUpdate();
this.$refs.scroll.refresh();
return;
}
this.pageNo ++ ;
this.fetch_orderList(0);
},
/**
* @method: fetch_orderList
* @des: 获取订单
* @param {isFirst} 是否第一次进入 1：是第一次进入 0：不是
* @return:
*/
async fetch_orderList(isFirst) {
let params ={
pageNo:this.pageNo,
isPage:this.page,
pageSize:this.pageSize,
queryParams:{
menuType:""
}
};
let res = await this.$api.uni.listCarOrders(params); if (+res.code === 0) {
var {dataList, total ,totalPage} = res.data;
// 第一次请求
if(isFirst){
this.dataPage = dataList;
this.total = total;
this.totalPage = totalPage;
}else{
this.$nextTick(()=>{
console.log('--------------调用加载更多订单数据');
if(dataList.length > 0){
console.log(dataList)
this.dataPage = this.dataPage.concat(dataList);
this.$refs.scroll.forceUpdate();
}else{
this.$refs.scroll.forceUpdate();
window.$utils.msg.warn('没有更多数据啦！');
}
this.$refs.scroll.refresh();
});
}
}
}, }
};
</script>
<style lang="less" scoped>
@import url("../../styles/common.less");
.model-box{
height: 100%;
background: #ffffff;
.page-order {
height: 100%;
}
}
.page-order-list {
.order-list-wrapper {
background: #f6f6f6;
height: 100%;
li{
&:last-child{
margin-bottom: 0;
}
}
}
.noresult {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
padding-top: 50%;
.gray-color;
img{
width: 210px;
height: 115px;
margin-bottom:30px;
}
div{
font-size: 24px;
text-align: center;
}
}
}
</style>
最新文章
- CATransition转场动画
- Webpack 入门指南 - 3. Hello, Angular2!
- AX7: HOW TO USE TABLE METHOD EXTENSION CLASS
- 《UML大战需求分析》阅读笔记3
- 配置处理结果result
- WEB典型应用
- Servlet中web.xml 以及 <url-pattern>总结
- C# WinForm多线程（一）----- Thread类库
- 1.RN环境搭建，创建项目，使用夜神模拟调试
- 解决find命令报错： paths must precede expression
- Linux命令之touch
- C++复习：多态
- 11th 如果重新来过
- 修改windows默认的远程连接端口
- C#值类型装箱后能改变其值吗
- 小程序开通微信支付 --- 微信商户平台绑定微信小程序APPID
- 阿里云64位centos6.3系统上编译安装redis
- Eclipse中的build path详解
- PAT 甲级 1019 General Palindromic Number（简单题）
- PAT 天梯赛 L1-048. 矩阵A乘以B 【数学】