How to combine "pull to refresh" and "infinite scroll"



  • I want to combine the two ,
    but there will be some space between them,
    I need to remove it 0_1479092339815_QQ截图20161114105821.png

    who can help me?

    thank you very munch ,joe


  • Admin

    Got any repo I can take a look? Thx.



  • @rstoenescu

    <template>
      <div>
        <div class="layout-padding">
          <quasar-infinite-scroll :handler="refresher">
            <quasar-pull-to-refresh :handler="getNew">
              <p class="caption">
              <span class="label bg-secondary text-white shadow-1">
                0
              </span>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              </p>
            </quasar-pull-to-refresh>
            <p v-for="(item, index) in items" class="caption">
              <span class="label bg-secondary text-white shadow-1">
                {{ index + 1 }}
              </span>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            </p>
    
            <div class="row justify-center" style="margin-bottom: 50px;">
              <spinner name="dots" slot="message" :size="40"></spinner>
            </div>
          </quasar-infinite-scroll>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return {
          items: [{}, {}, {}, {}, {}]
        }
      },
      methods: {
        refresher (index, done) {
          console.log('index', index)
          setTimeout(() => {
            let items = []
    
            for (let i = 0; i < 7; i++) {
              items.push({})
            }
    
            this.items = this.items.concat(items)
            done()
          }, 1000)
        },
        getNew (done) {
          done()
        }
      }
    }
    </script>
    

  • Admin

    This is a working example. Just put quasar-pull-to-refresh as parent of quasar-infinite-scroll, not the other way around:

    <template>
      <div>
        <div class="layout-padding">
          <quasar-pull-to-refresh :handler="getNew">
            <quasar-infinite-scroll :handler="refresher">
              <p class="caption">
              <span class="label bg-secondary text-white shadow-1">
                0
              </span>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              </p>
              <p v-for="(item, index) in items" class="caption">
                <span class="label bg-secondary text-white shadow-1">
                  {{ index + 1 }}
                </span>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              </p>
    
              <div class="row justify-center" style="margin-bottom: 50px;">
                <spinner name="dots" slot="message" :size="40"></spinner>
              </div>
            </quasar-infinite-scroll>
          </quasar-pull-to-refresh>
        </div>
      </div>
    </template>
    


  • @rstoenescu thx,but there will be a new problem ,the infinite scroll doesn’t work


  • Admin

    @joe I tested it myself before submitting code to you. It does work.



  • @rstoenescu I can’t scroll down in the mobile browser when I combine them ,can you help me


  • Admin

    @joe Hi, please wait the end of the week for me to release v0.9. That will work with pull to refresh and infinite scroll combined.



  • @rstoenescu thx, excited



  • @rstoenescu
    I test the official demo pull to refresh in the ios10 safari, scrolling up is not easy, the bug is also exsited , please check this
    when I combine them , I find scrolling up not easy in ios safari . it’s ok in android


  • Admin

    @joe yes, I noticed that too. Gonna squash some safari ios (the new IE of browsers) bugs really soon.


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.