1.安裝
npm i vue-infinite-scroll --save
2.main.js中引入
import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)
3.在.vue文件中使用
<el-radio-group v-model="radioValue" @change="switchRadio">
<el-radio-button label="0">匯總</el-radio-button>
<el-radio-button label="1">接收</el-radio-button>
<el-radio-button label="2">拒絕</el-radio-button>
</el-radio-group>
<ul
ref="infinite"
v-infinite-scroll="load"
infinite-scroll-disabled="busy"
infinite-scroll-distance="10"
>
<li v-for="(item,index) in dataList" :key="index"></li>
</ul>
export default {
data() {
return {
busy: true,//true 禁用
pageindex: 1,
pagesize: 10,
}
}
load() {
this.busy = true;
this.pageindex++
stockreceiveApi
.stock2list2(
[],
"ls",
this.searchKey,
this.dateRange[0],
this.dateRange[1],
this.standby_flag,
this.acc_flag,
this.pageindex,
this.pagesize
)
.then(res => {
if (res.flag) {
this.firstRender = true;
this.dataList = this.dataList.concat(res.data.rows);
if (this.pageindex >= Math.ceil(res.data.totalCount/10)){
this.infiniteMsgShow = false // 切換底部提示信息
this.busy = true;
return false;
}
}
});
this.busy = false;
},
switchRadio(value) {
//tab切換的時候高度可能會停留在上一次滾動的位置，做以下處理
this.$nextTick(() => {
this.$refs.infinite.scrollTop=0
})
}
過程中有幾個坑
1.tab切換的時候高度可能會停留在上一次滾動的位置
2.busy的true和false的處理
