移动端框架Mint-ui的infinite scroll

最新推荐文章于 2023-04-13 10:41:57 发布

菜鸟一个abc122619

最新推荐文章于 2023-04-13 10:41:57 发布

阅读量164

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_43465609/article/details/115435509

本文介绍了如何使用Mint-UI框架在移动端实现无限滚动效果。初始加载3条数据，随后通过监听loadMore事件，每次下拉加载额外的3条数据，直至所有数据加载完成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML代码:

<div class="now-content">
		<div class="list">
			<ul 
			v-infinite-scroll="loadMore"
			infinite-scroll-disabled="isMoreLoading"
			infinite-scroll-distance="10"
			infinite-scroll-immediate-check="true"
			>
			<router-link :to="{path:'/detail',query:{id:data.id}}" tag="li" class="list-item" v-for="data in moviesList" :key="data.id">
				<div class="img">
					<img :src="data.imgUrl" alt=""/>
				</div>
				<div class="message">
					<div class="message-title">
						<h2>{{data.title}}</h2>
					</div>
					<div class="message-content">
						<span class="mark" alt="观众评分">{{data.mark}}</span>
						<span class="role" alt="主演人员">主演:{{data.role}}</span>
						<span class="show-info">{{data.show_info}}</span>
					</div>
			    </div>
			    <div class="button">购票</div>
	        </router-link>
	        </ul>
	        <div class="loading-box" v-if="isLoading">
	        	<mt-spinner type="snake" class="loading-more" color="#26a2ff" v-if="isAnimation"></mt-spinner>
	      	    <span class="loading-more-txt">加载中.....</span>
	        </div>
	        <div class="no-more" v-if="noMore">没有更多了</div> 
	        <footer style="width:100%;height:40px;background-color:white;"></footer>
	    </div>
	</div>

js代码:

data(){
			return{
				 moviesList:[],
				 newList:[],
				 isMoreLoading:false,
                 isLoading:false,
                 noMore:false,
                 isAnimation:false,
                 i:0
			}
		},

我是刚开始的时候是设置加载3条数据

 getdetail:function(){
            	var  _vm = this;
            	let i = 0;
                this.$axios.get("http://localhost:3000/users")
                 .then((res)=>{
                       _vm.moviesList = res.data.slice(i * 3,( i + 1 ) * 3)
                 })
                 .catch((error)=>{
                 	console.log(error)
                 })
            },

然后每次下拉的时候触发loadMore事件，继续加载3条数据，直到数据加载完毕

 loadMore(){
            	this.isMoreLoading = true;//禁用
            	this.isLoading = true;//启用加载中
            	this.isAnimation = true;
            	setTimeout(()=>{
                    var _vm = this;
                     _vm.$axios.get("http://localhost:3000/users")
                     .then((res)=>{
                        // console.log(res.data)
                        _vm.i++;
                        _vm.newList = res.data.slice( _vm.i * 3, ( _vm.i + 1 ) * 3);
                        if(_vm.newList.length == 0){
                        	// console.log("没有更多了")
                        	_vm.noMore = true;
                        	_vm.isLoading  = false;
                        	_vm.isMoreLoading = true;
                        	_vm.isAnimation = false;
                        	return ;//当等于零的时候,使用return返回,这样就不会没有数据也重复加载
                        }else{
                        	// console.log("加载更多")
                        	_vm.isLoading = true;
                        	_vm.isAnimation = true;
                        	_vm.newList.forEach(function(data){
                                  _vm.moviesList.push(data)
                        	})
                        }
                     })
                     .catch((error)=>{
                     	console.log(error)
                     });
                     _vm.isMoreLoading = false;   
            	},500)
            }