前端vue簡(jiǎn)單好用的上拉加載下拉刷新組件,支持列表分頁 本地分頁,?閱讀全文下載完整代碼請(qǐng)關(guān)注微信公眾號(hào)： 前端組件開發(fā)
效果圖如下:
?
#### 使用方法
```使用方法
<!-- pullDown:下拉刷新 back-top: 回到頂部? -->
<ccPullScroll class="pullScrollView" ref="pullScroll" :back-top="true" :pullDown="pullDown">
</ccPullScroll>
```文章來源地址http://www.zghlxwxcb.cn/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代碼 （引入組件 填充數(shù)據(jù)）
```javascript
<script>
import CCBProjectList from '../../components/ccPageView/CCProjectList.vue';
import ccPullScroll from '../../components/ccPullScroll/index.vue'
export default {
components: {
CCBProjectList,
ccPullScroll
},
data() {
return {
// 列表總數(shù)量
totalNum: 60,
//? 頁碼 默認(rèn)1開始
curPageNum: 1,
// 列表數(shù)組
projectList: []
}
},
mounted() {
// 頁面刷新方法 會(huì)自動(dòng)調(diào)用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() {
// 數(shù)據(jù)全部加載完
if (this.curPageNum * 10 >= this.totalNum) {
} else {
this.curPageNum++;
this.requestData();
}
},
// 列表?xiàng)l目點(diǎn)擊事件
goProDetail(item) {
},
requestData() {
// 模擬請(qǐng)求參數(shù)設(shè)置
let reqData = {
'area': '',
"pageSize": 10,
"pageNo": this.curPageNum
}
let myThis = this;
setTimeout(function() {
// 模擬請(qǐng)求接口
for (let i = 0; i < 10; i++) {
myThis.projectList.push({
'proName': '產(chǎn)品名稱' + i,
'proUnit': '公司名稱' + i,
'area': '廣東省',
'proType': '省級(jí)項(xiàng)目',
'stage': '已開工',
'id': 10 * (myThis.curPageNum + i) + myThis.curPageNum + ''
});
}
// 列表總數(shù)量
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>文章來源：http://www.zghlxwxcb.cn/news/detail-477874.html
```
到了這里，關(guān)于前端vue簡(jiǎn)單好用的上拉加載下拉刷新組件,支持列表分頁 本地分頁的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
