vue uses better-scroll to achieve pull-down refresh and pull-up loading

The purpose of this article is to achieve the drop-down refresh and pull-up loading of the list, so thebetter-scrollThis library.

Use this library well and need to understand the following instructions

Must contain two large divs, outer and inner divs
The outer div sets the visible size (width or height)-there is a limit on width or height
The inner div wraps the entire scrollable part
The height of the inner div must be greater than the width or height of the outer div before it can roll

1. Start writing a simple demo, the most basic code architecture

template

<div ref="wrapper" class="wrapper">
 <ul class="content">
 <li>...</li>
 <li>...</li>
 </ul>
</div>

css

/*High limits are imposed on the outer div*/
.wrapper {
 display: fixed;
 left: 0;
 top: 0;
 bottom: 0;
 width: 100%;
 height:300px;
 overflow:hidden;
}
.content {
 width:100%;
 height:800px;
 background:blue;
}

script

import BScroll from 'better-scroll'
 = new BScroll(new BScroll(this.$))

2. Carry out transformation and upgrade, and add codes to pull-up refresh and drop-down loading.

 mounted () {
  = new BScroll(this.$, {
 // Pull-up load pullUpLoad: {
 // Trigger pullingUp event when the pulling up distance exceeds 30px threshold: -30
 },
 // Pull down to refresh pullDownRefresh: {
 // The pull-down distance exceeds 30px triggers the pullingDown event threshold: 30,
 // The rebound stays at 20px from the top stop: 20
 }
 })
 ('pullingUp', () =&gt; {
 ('Processing the pull-up loading operation')
 setTimeout(() =&gt; {
 // After finishing things, you need to call this method to tell better-scroll that the data has been loaded, otherwise the pull-up event will only be executed once ()
 }, 2000)
 })
 ('pullingDown', () =&gt; {
 ('Processing the pull-down refresh operation')
 setTimeout(() =&gt; {
 ('asfsaf')
 // After finishing things, you need to call this method to tell better-scroll that the data has been loaded, otherwise the pull-down event will only be executed once ()
 }, 2000)
 })
 }

The principle has been explained clearly. The above code is a functional example. Just expand it with your own project.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.