前端vue簡單好用的上拉加載下拉重繪組件,支持串列分頁 本地分頁, 下載完整代碼請訪問uni-app插件市場地址: https://ext.dcloud.net.cn/plugin?id=12942
效果圖如下:
#### 使用方法
```使用方法
<!-- pullDown:下拉重繪 back-top: 回到頂部 -->
<ccPullScroll ref="pullScroll" :back-top="true" :pullDown="pullDown">
</ccPullScroll>
```
#### HTML代碼部分
```html
<template>
<view >
<!-- -->
<div >
<!-- pullDown:下拉重繪 back-top: 回到頂部 -->
<ccPullScroll 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 = https://www.cnblogs.com/ccVue/archive/2023/06/10/{
'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.uj5u.com/qiye/554869.html
標籤：其他
上一篇：前端仿新浪新聞 tabs 選項卡tabs標簽頁，根據文字多少自適應 tab項寬度
下一篇：返回列表