vue pull-to上拉加载

最新推荐文章于 2025-10-10 04:42:09 发布

原创最新推荐文章于 2025-10-10 04:42:09 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

js 同时被 2 个专栏收录

7 篇文章

订阅专栏

vue

7 篇文章

订阅专栏

这篇博客介绍如何在 Vue 项目中使用 vue-pull-to 组件实现上拉加载更多的功能。通过引入 TopNav 和 PullTo 组件，结合 data 属性和事件监听，实现了当用户滚动到底部时加载更多数据的交互效果。

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:

<div class=“movie-item” @click=“handleToDetail” v-for="(item,key) in moviceList">