js代码是如下，只把new vue 里的标签id 跟我实际模板的标签id改成一致的了。其他没动。为啥没有滚动 “加载更多”的效果啊。问题出在哪里啊啊啊啊啊啊啊
//获取要定位元素距离浏览器顶部的距离
var navH = $(".channel").offset().top;
// console.log(navH);
//滚动条事件
$(window).scroll(function() {
//获取滚动条的滑动距离
var scroH = $(this).scrollTop();
// console.log(scroH);
//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定
if (scroH >= navH) {
$(".channel").css({
"position": "sticky",
"top": '0.96rem',
"z-index": 10
});
}else if (scroH < navH) {
$(".channel").css({
"position": "static"
});
}
})
var mySwiper = new Swiper('.swiper-container', {
autoplay: {
delay: 1000, //4.0自动切换滚动 间隔时间1秒 单位是毫秒
disableOnInteraction: false //4.0用户操作swiper后是否禁止autoplay,默认为t rue静止。
},
speed: 1000, //定义切换的速度
loop: true, //定义循环播放 true (false 为默认值 不循环)
pagination: { //4.0的分页器
el: ".swiper-pagination"
}
})
var news = new Vue({
el: '#news',
data: {
load: '加载更多',
uploading: true,
getData: {
channelPaths: '${channel.path}',
orderBy: 1,
channelOption:1,
page: 1,
size: 10
},
isload: false,
list: [],
newPage: [],
last: false,
navList: [],
path: '${channel.path}',
listLength: '${listLength}'
},
mounted() {
if (this.listLength < 10) {
this.load = '没有更多了'
this.isload = false
this.last = true
}
},
created() {
var that = this
api.GET('/channel/list', {
parentId: 1747
}, function(res) {
console.log(res)
if (res.code == 200) {
that.navList = res.data
}
})
},
methods: {
loading() {
if (this.uploading) {
this.uploading = false
if (!this.last) {
this.load = '加载更多'
this.isload = true
this.getData.page += 1
this.getContentPage()
} else {
this.load = '没有更多了'
this.isload = false
}
}
},
getContentPage() {
var that = this
api.GET('/content/page', that.getData, function(res) {
console.log(res)
if (res.code == 200) {
that.last = res.data.last
if (!that.last) {
that.load = '加载更多'
that.isload = true
} else {
that.load = '没有更多了'
that.isload = false
}
that.newPage = res.data.content;
that.list = that.list.concat(that.newPage)
that.uploading = true
}
})
}
}
})
|
|
