前端vue简单好用的上拉加载下拉刷新组件,支持列表分页 本地分页, 阅读全文下载完整代码请关注微信公众号： 前端组件开发
效果图如下:
#### 使用方法
```使用方法
<!-- pullDown:下拉刷新 back-top: 回到顶部 -->
<ccPullScroll class="pullScrollView" ref="pullScroll" :back-top="true" :pullDown="pullDown">
</ccPullScroll>
```文章来源地址https://www.toymoban.com/news/detail-477874.html
#### HTML代码部分
```html
<template>
<view class="content">
<!-- -->
<div class="mui-content-padded">
<!-- pullDown:下拉刷新 back-top: 回到顶部 -->
<ccPullScroll class="pullScrollView" ref="pullScroll" :back-top="true" :pullDown="pullDown">
<!-- 列表组件 -->
<CCBProjectList :productList="projectList" @click="goProDetail"></CCBProjectList>
</ccPullScroll>
</div>
</view>
</template>
```
#### JS代码 （引入组件 填充数据）
```javascript
<script>
import CCBProjectList from '../../components/ccPageView/CCProjectList.vue';
import ccPullScroll from '../../components/ccPullScroll/index.vue'
export default {
components: {
CCBProjectList,
ccPullScroll
},
data() {
return {
// 列表总数量
totalNum: 60,
// 页码 默认1开始
curPageNum: 1,
// 列表数组
projectList: []
}
},
mounted() {
// 页面刷新方法 会自动调用pulldown一次
this.pageRefresh();
},
methods: {
pageRefresh() {
let myThis = this;
this.$nextTick(() => {
myThis.$refs.pullScroll.refresh();
});
},
pullDown(pullScroll) {
console.log('下拉刷新');
this.projectList = [];
this.curPageNum = 1;
setTimeout(() => {
this.requestData(pullScroll);
}, 300);
},
// 上拉加载
onReachBottom() {
// 数据全部加载完
if (this.curPageNum * 10 >= this.totalNum) {
} else {
this.curPageNum++;
this.requestData();
}
},
// 列表条目点击事件
goProDetail(item) {
},
requestData() {
// 模拟请求参数设置
let reqData = {
'area': '',
"pageSize": 10,
"pageNo": this.curPageNum
}
let myThis = this;
setTimeout(function() {
// 模拟请求接口
for (let i = 0; i < 10; i++) {
myThis.projectList.push({
'proName': '产品名称' + i,
'proUnit': '公司名称' + i,
'area': '广东省',
'proType': '省级项目',
'stage': '已开工',
'id': 10 * (myThis.curPageNum + i) + myThis.curPageNum + ''
});
}
// 列表总数量
myThis.totalNum = 60;
// 如果是最后一页
if (myThis.curPageNum * 10 >= myThis.totalNum) {
myThis.$refs.pullScroll.finish();
} else {
// 不是最后一页
myThis.$refs.pullScroll.success();
}
}, 600);
}
}
}
</script>
```
#### CSS
```css
<style>
page {
}
.content {
display: flex;
flex-direction: column;
}
.mui-content-padded {
margin: 0px 14px;
/* */
}
.pullScrollView {
display: flex;
flex-direction: column;
}
</style>文章来源：https://www.toymoban.com/news/detail-477874.html
```
到了这里，关于前端vue简单好用的上拉加载下拉刷新组件,支持列表分页 本地分页的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
