Как прокрутить и загрузить больше, используя метод slice, в pug и JavaScript? - PullRequest
Новая
       8

Как прокрутить и загрузить больше, используя метод slice, в pug и JavaScript?

0 голосов
/ 28 февраля 2020

У меня есть файл мопса, где вы видите allBikeData, это имя моего JSON, 

ul.bikeshop-page 
        for specificBike in allBikeData.slice(0, 12)
          .bikeshop-card.bg-white.m-3.p-4
            li
              img.shop-image(src=specificBike.image, onerror="this.onerror=null; this.src='https://imgur.com/qzN3r1U.png'" alt="")
            li
              img(src=specificBike.logo, alt="")
            li
              a.text-dark(href=specificBike.website)
                h3.font-weight-bold=specificBike.shopname
            li
              h4=specificBike.contact
            li
              h4
                span.glyphicon.glyphicon-earphone 
                p=specificBike.phone
            li
              h4
                span.glyphicon.glyphicon-home
                p=specificBike.address
            li
              a.btn.btn-success(href=specificBike.facebook) Facebook
              a.btn.btn-success.ml-1(href=specificBike.instagram) Instagram
        div.loading
          div.ball
          div.ball
          div.ball

Я все еще пытаюсь загрузить еще 12 при прокрутке вниз, я могу понять это с мопсом. (К вашему сведению, мне нужно использовать мопса в моей стажировке) Вот мой сценарий. 

  script.

    allBikeData = !{JSON.stringify(allBikeData)}

    const loading = document.querySelector('.loading')
    const showLoading = () => {
      loading.classList.add('show')
    }
    const stopLoading = () => {
      loading.classList.remove('show')
    }
    const loadData = document.querySelector('.bikeshop-page')


    window.addEventListener('scroll', () => {
      if(window.scrollY + window.innerHeight >= document.documentElement.scrollHeight){
        showLoading()
        appendData()
      } else {
        stopLoading()
      }
    })

    const appendData = () => {
      let pug = ``
      for(i = 0; i < 10; i++) {
        pug = `
              for specificBike in allBikeData.slice(12, 24)
                .bikeshop-card.border.border-dark.bg-white.m-3.p-4
                  li
                    img.shop-image.border.border-dark(src=specificBike.image, onerror="this.onerror=null; this.src='https://imgur.com/qzN3r1U.png'" alt="")
                  li
                    img(src=specificBike.logo, alt="")
                  li
                    a.text-dark(href=specificBike.website)
                      h3.font-weight-bold=specificBike.shopname
                  li
                    h4=specificBike.contact
                  li
                    h4
                      span.glyphicon.glyphicon-earphone 
                      p=specificBike.phone
                  li
                    h4
                      span.glyphicon.glyphicon-home
                      p=specificBike.address
                  li
                    a.btn.btn-success(href=specificBike.facebook) Facebook
                    a.btn.btn-success.ml-1(href=specificBike.instagram) Instagram`
          }
      loadData.append(pug)
    }

Если бы кто-нибудь мог помочь мне решить его, это было бы неплохо, и спасибо!

...