这是HTML结合vue使用的，如果直接用vue脚手架写移动端的话，向下滚动有一个好用的插件 vant 里的list
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<div>
<div class="conten">
<div class="list" v-for="(i,item) in list" :key="item">
<div class="list_img wd1 r">
<img :src="i.goodsImg" alt />
<div>{{i.**}}</div>
</div>
<div class="Updown">
<div class="up">
<div class="wd2 hg r cent">{{i.**}}</div>
<div class="wd3 hg r cent zz">
<del class="h">{{i.**}}</del>
<div>{{i.**}}</div>
</div>
<div class="wd4 hg cent">
<a href="javascript:;" ref="dom" class="btn cobyOrderSn" @click="copyLink(i.**,item)">一键复制</a>
</div>
</div>
<div class="down">{{i.**}}</div>
</div>
</div>
<div style="height: 0.8rem;text-align:center;line-height: 0.8rem;color: #969799;">{{loadingMore}}</div>
</div>
</div>
</div>
</div>
<script src="js/jQuery.js"></script>
<script src="js/layer.js" type="text/javascript"></script>
<script>
var taB;
new Vue({
el:'#app',
data:{
loadingMore: '正在加载中···',
isScroll: true,
page:0,
},
methods: {
getlist(tabB,page) {
taB = tabB;
$.ajax({
type: "post",
url: "",
data: JSON.stringify({categoryName:tabB,pageNo:page}),
contentType: 'application/json',
dataType: "json",
success: res=>{
this.list = this.list.concat(res.data.list);
this.listlength = res.data.total;
if (this.list.length>= this.listlength) {
this.loadingMore = '没有更多了···'
this.isScroll = false;
this.page = 0;
}
}
});
},
},
created() {
},
mounted() {
let _this = this;
$(window).on('scroll',function(){
var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(this).height();
if(scrollHeight-scrollTop-windowHeight-3<=0&&_this.isScroll){
_this.page++;
_this.getlist(taB,_this.page)
}
})
},
})
</script>
</body>
</html>
