vue pull-to上拉加载

js:
import TopNav from ‘@/components/TopNav.vue’;
import PullTo from ‘vue-pull-to’;

const BOTTOM_DEFAULT_CONFIG = {
    pullText: '上拉加载',
    triggerText: '释放更新',
    loadingText: '加载中...',
    doneText: '加载完成',
    failText: '加载失败',
    loadedStayTime: 400,
    stayDistance: 50,
    triggerDistance: 70
};

export default {
name: ‘Movie’,
data() {
return {
loading: false,
finished: true,
moviceList:[1,1,1,1,1,1,3,3,3,5],
page:1,
BOTTOM_DEFAULT_CONFIG:BOTTOM_DEFAULT_CONFIG
};
},
components: {
TopNav,
PullTo,

},
methods: {
	handleToDetail() {
		this.$router.push('/movieDetail');
	},
	  infiniteHandler(loaded) {
        this.page++;//页码数加一
        console.log(this.page);
	  },
	  getData(){
		  
	  }

}

};

html:

<

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是Vue3 Element-UI Table表格上拉加载的实现方法: 1.首先,需要在Vue组件中引入Element-UI库和axios库。 ```javascript import { ElTable, ElTableColumn } from 'element-plus' import axios from 'axios' ``` 2.在Vue组件中定义data属性,包括表格数据、表格高度、每页显示的数据条数、当前页码等。 ```javascript data() { return { tableData: [], height: 500, pageSize: 20, currentPage: 1, loading: false, finished: false } } ``` 3.在Vue组件中定义methods方法,包括获取表格数据的方法和上拉加载的方法。 ```javascript methods: { // 获取表格数据 async getTableData() { try { const res = await axios.get('/api/tableData', { params: { pageSize: this.pageSize, currentPage: this.currentPage } }) if (res.data.length > 0) { this.tableData = this.tableData.concat(res.data) this.currentPage++ } else { this.finished = true } } catch (error) { console.log(error) } finally { this.loading = false } }, // 上拉加载 loadMore() { if (this.loading || this.finished) { return } this.loading = true this.getTableData() } } ``` 4.在Vue组件中使用Element-UI的Table组件,并绑定上拉加载事件。 ```html <template> <div> <el-table :data="tableData" style="width: 100%" :height="height" v-loadmore="{ eventH: () => loadMore() }" > <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </div> </template> ``` 5.最后,在Vue组件中使用mounted钩子函数调用getTableData方法获取表格数据。 ```javascript mounted() { this.getTableData() } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值