前端开发:基于移动端的下拉刷新、上提加载的使用,字节跳动移动架构师学习笔记

components: { },

data() {

return {

tabActive: 0,

badgeNum: 0,

toFeedBackBadgeNum: 0,

toFeedBackInterviewers: [], //列表数据源数组

isLoading: false,

limit1: 10, //每页多少条数据

offset1: 0, //第0页

finished1: false, // 数据是否请求结束,结束会先显示- 没有更多了 -

loading1: false, //默认刷新菊花不显示

};

},

mounted() {

this.$nextTick(_ =>{

this.tabActive = localStorage.getItem(‘activekey’) || 0;

})

this.getFeedBackInterviewers();

},

created() {},

methods: {

//接口获取数据源

getFeedBackInterviewers() {

this.loading1 = true; //调用接口请求开始的时候显示三方菊花loading

let offset1 = this.offset1 * this.limit1;

this.$service.java_recruit

.getInterviewList({

params: {

type: “2”,

limit: this.limit1,

offset: offset1,

},

})

.then(® => {

if (r.status == 200) {

this.loading1 = false; //不在调用下拉刷新

this.isLoading = false; //请求成功之后隐藏loading

if (r.data.rows.length < 10) {

this.finished1 = true; //设置为true

} else {

this.offset1++;

}

this.toFeedBackBadgeNum = r.data.total == 0 ? “” : r.data.total;

r.data.rows.forEach((e) => {

this.toFeedBackInterviewers.push(e);

});

}

});

},

//加载数据

onLoad1() {

this.getFeedBackInterviewers(); //调用数据源接口获取数据

},

//刷新数据

onRefresh1() {

setTimeout(() => {

// 重新初始化属性

this.isLoading = false; //隐藏loading

this.offset1 = 0;

this.loading1 = true;

this.finished1 = false;

this.toFeedBackInterviewers = [];

this.getFeedBackInterviewers(); //调用数据源接口获取数据

}, 500);

},

},

};

3、样式设置模块

  • 5
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值