小程序的上拉加载和下拉刷新

作者: 倩仔6 | 来源:发表于2020-08-27 20:08 被阅读0次

//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

网友评论

本文标题：小程序的上拉加载和下拉刷新

本文链接：https://www.haomeiwen.com/subject/gfjhsktx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

小程序的上拉加载和下拉刷新

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读