Есть
сайт на нем ( в статьях), просто кликнете на карточку, меняются статьи. Т.е. не полностью все подгружаются, а когда пользователь скролит.
Проблема в мобилке. Он просто ведет себя совсем по-другому. Он не подгружает по скроллу, а просто все статьи выгружает. В чем ошибка не могу найти. Проверить на localhoste не могу. в devtools на моб. нормальное поведение.
Вот код скролла, для большего понимания лучше зайти на сайт с телефона и нажать на любую карточку.
mounted() {
this.scroll()
},
methods: {
scrollToTop() {
if (scrolled > 0) {
window.scrollTo(0, scrolled)
scrolled = scrolled - 100
timer = setTimeout(() => {
this.scrollToTop()
}, 10)
} else {
clearTimeout(timer)
window.scrollTo(0, 0)
}
},
scroll() {
/* eslint-disable */
let iCan = false
window.onscroll = () => {
window.pageYOffset > 1 ? iCan = true : false
const bottomOfWindow =
document.documentElement.scrollTop + window.innerHeight >=
document.documentElement.offsetHeight
if (bottomOfWindow && iCan) {
if (!this.loading) {
this.loading = true
// добавляем старую статью в слайдер
this.$store.dispatch('addArticle')
// при этом удаляем предыдущие
if (this.$store.state.prev != null) {
this.$store.dispatch('deleteArticles')
.then(success => {
this.mySwiper.slideNext()
})
}
}
this.mySwiper.slideNext()
setTimeout(() => {
this.loading = false
}, 1000)
} else if (document.documentElement.scrollTop === 0 && iCan) {
// добавляем новую статью в слайдер
this.$store.dispatch('returnArticle')
// при этом удаляем предыдущие
if (this.$store.state.next != null) {
this.$store.dispatch('deleteArticles')
.then(success => {
this.mySwiper.slidePrev()
})
/* eslint-enable */
}
}
}
},
imgFor() {
if (screen.width <= 500) {
const img = document.getElementsByTagName('img')
for (let i = 0; i <= img.length; i++) {
img[i].style = 'max-width:280px'
}
} else return null
}
}
Большое спасибо!
