192 lines
3.3 KiB
Markdown
192 lines
3.3 KiB
Markdown
# cc-pullScroolView 该组件免费，但版权问题需关注“前端组件开发”公众号获取授权
|
||
|
||
#### 使用方法
|
||
```使用方法
|
||
|
||
<!-- ref：唯一ref pullDown:下拉刷新事件 上拉加载方法写在生命周期onReachBottom方法内 -->
|
||
<cc-pullScroolView class="pullScrollView" ref="pullScroll" :pullDown="pullDown">
|
||
</cc-pullScroolView>
|
||
|
||
<!-- 注意: 上拉加载方法写在onReachBottom方法内 -->
|
||
onReachBottom() {
|
||
// 数据全部加载完
|
||
if (this.curPageNum * 10 >= this.totalNum) {
|
||
|
||
} else {
|
||
|
||
// 显示加载中
|
||
this.$refs.pullScroll.showUpLoading();
|
||
this.curPageNum++;
|
||
this.requestData();
|
||
}
|
||
|
||
},
|
||
|
||
```
|
||
|
||
#### HTML代码实现部分
|
||
```html
|
||
<template>
|
||
<view class="content">
|
||
|
||
<div class="mui-content-padded">
|
||
|
||
<!-- ref：唯一ref pullDown:下拉刷新事件 onReachBottom：上拉加载事件 -->
|
||
<cc-pullScroolView class="pullScrollView" ref="pullScroll" :back-top="true" :pullDown="pullDown">
|
||
|
||
<!-- 列表组件 -->
|
||
<CCBProjectList :productList="projectList" @click="goProDetail"></CCBProjectList>
|
||
|
||
</cc-pullScroolView>
|
||
|
||
</div>
|
||
|
||
|
||
</view>
|
||
</template>
|
||
|
||
|
||
<script>
|
||
import CCBProjectList from '../../components/ccPageView/CCProjectList.vue';
|
||
|
||
export default {
|
||
components: {
|
||
|
||
CCBProjectList,
|
||
|
||
|
||
},
|
||
data() {
|
||
return {
|
||
// 列表总数量
|
||
totalNum: 60,
|
||
// 页码 默认1开始
|
||
curPageNum: 1,
|
||
|
||
// 列表数组
|
||
projectList: []
|
||
}
|
||
},
|
||
onLoad() {
|
||
|
||
// 页面刷新方法 会自动调用pulldown一次
|
||
this.pageRefresh();
|
||
},
|
||
// 上拉加载
|
||
onReachBottom() {
|
||
// 数据全部加载完
|
||
if (this.curPageNum * 10 >= this.totalNum) {
|
||
|
||
} else {
|
||
|
||
// 显示加载中
|
||
this.$refs.pullScroll.showUpLoading();
|
||
this.curPageNum++;
|
||
this.requestData();
|
||
}
|
||
|
||
},
|
||
|
||
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);
|
||
|
||
},
|
||
|
||
|
||
// 列表条目点击事件
|
||
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>
|
||
|
||
|
||
<style>
|
||
page {
|
||
|
||
background-color: #f2f2f2;
|
||
}
|
||
|
||
.content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
}
|
||
|
||
.mui-content-padded {
|
||
margin: 0px 14px;
|
||
/* background-color: #ffffff; */
|
||
}
|
||
|
||
.pullScrollView {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
}
|
||
</style>
|
||
```
|