前端vue简单好用的上拉加载下拉刷新组件,支持列表分页 本地分页, 下载完整代码请访问uni-app插件市场地址: https://ext.dcloud.net.cn/plugin?id=12942
效果图如下:
#### 使用方法
```使用方法
<!-- pullDown:下拉刷新 back-top: 回到顶部 -->
<ccPullScroll class="pullScrollView" ref="pullScroll" :back-top="true" :pullDown="pullDown">
</ccPullScroll>
```
#### 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>
```
文章来源: 博客园
- 还没有人评论，欢迎说说您的想法！
客服
