What is better – scroll

Better-scroll is a plug-in that focuses on solving the needs of various scrolling scenarios on mobile terminals (supported by PC). Its core is the implementation of iscroll reference, its API design is basically compatible with IScroll, on the basis of IScroll and extended some features and do some performance optimization.

Rolling principle

<div class="wrapper">
      <div class="content">
      </div>
</div>
Copy the code

The Wrapper, the parent container, will have a fixed height. Content, which is the first child of the parent container, and its height increases with the size of the content. So, content can’t be scrolled if it’s not higher than the height of the parent container, but if it’s higher than the height of the parent container, we can scroll the content area, and that’s how the Better Scroll works.

Usage scenarios

Use Bette-Scroll to implement click back to the bottom and pull up to load more and move end scrolling stuck

Use better-Scroll in Vue

1. First, encapsulate Better-Scroll into a separate component. Because mobile is a lot of places in a project

  • 1, through thenpm install better-scroll --saveTo install the
  • Create a new onebetter-scroll.vueThe component,<template>Write the following code to
<template>
  <div class="wrapper" ref="wrapper">
      <div class="content">
          <slot></slot>
      </div>
  </div>
</template>
Copy the code

There must be only one label content underneath the wrapper, and components that need to be scrolled later are inserted under the content using slot

  • 3, in<script>Lead into thebetter-scroll
<script> // import better-scroll import BScroll from'better-scroll'
  export default {
    name:'BetterScroll',
    },
</script>
Copy the code
  • 4, inmountedCreate Scroll object in the hook function. You need to use$refsTo get the Wrapper DOM object increatedThe use of$refsYou can’t get it
 mounted(){// 1. Create scroll object this.scroll = new BScroll(this.$refs.wrapper,{})
        },

Copy the code
  • 5. Configure the newly created Scroll object in the Better-Scroll component

Because we want to encapsulate this component, we need to pass the value of probeType from where the component is being used, so we need props to implement it

Data related code

props:{ <! -- Receive arguments passed by the parent component --> probeType:{type:Number,
            default:0
        },
        pullUpLoad:{
            type:Boolean,
            default:false}},Copy the code

Object scroll related code

     this.scroll =  new BScroll(this.$refs.wrapper,{// 1, probeType: listen to the position of the scroll; Optional values: 1, 2, 3. ProbeType: enclosing probeType, / / 2, click: default value:falseBetter-scroll will block the browser's native Click event by default. When set totrueBetter Scroll will send a click event, and we'll add a private property _constructed to the event parameter that we sendtrue. click:true//3, pullUpLoad: default value:falseIf you need to listen for scroll bottom events, set this parameter totrue
          pullUpLoad:this.pullUpLoad
          })
Copy the code

Use the method that comes with scroll object

 mounted(){// 1. Create scroll object this.scroll = new BScroll(this.$refs.wrapper,{
          probeType:this.probeType,
          click: true, pullUpLoad:this.pullUpLoad }) //2. This.scroll. On ()'scroll',(position)=>{// The parent component is used to receive and process this.$emit('scroll',position)}) // 3. Implement loading more listening on the pull event this.scroll.'pullingUp',()=>{// called when scrolling to the bottom. console.log("The bottom is here.")
            this.$emit('pullingUp')})}Copy the code
  • 6. Encapsulation is completed; In the future, we need a new built-in scroll method, so we will add it in the better Scroll directly

2. Use the encapsulated Better Scroll component in the HOME component

  • 1. Import encapsulated components
import BetterScroll from '@/components/common/BetterScroll/BetterScroll'
Copy the code
  • 2. Register
  components: {
      BetterScroll
  }
Copy the code
  • 3. Put the components that need to be optimized into better-Scroll

I have the packaged goods list and I need to put the GoodList component into the Better Scroll

 <Better-scroll class="content"
    :probeType="3"// Listen to scroll :pullUpLoad="true"// Whether to scroll to the bottom of the listener method ref="scroll"
     @scroll="scroll"// Accept the real-time scroll coordinate emitted from the encapsulated component @pullingUp="loadmore"//// accepts pullingUp methods emitted from encapsulated components. < goods-list ></ goods-list ></ Better-scroll>Copy the code

Because with better Scroll, we need to set a scrollable area, so we need to add a Content to the encapsulated component

Configure the CSS required by the Better Scroll in the home component

  • 1. Set the CSS for the Home component div
<template>
	<div id="home">
	 <Better-scroll class="content">
	 <goodlist></goodlist>
	 </Better-scroll>
	</div>
Copy the code
#home{
    height:100vh;
    position: relative;
  }

Copy the code
  • 2. Set CSS for the Better-Scroll component, refer to the following figure and code; Set up scrollable area
 .content{
   overflow: hidden;
   position:absolute;
   top:44px;
   bottom:49px;
   left:0;
   right:0;
 }
Copy the code

This allows you to set the exact size of the scrollable area. There is no lag when scrolling on the mobile end.

3. Return to the top button effect

1. First control the display and hiding of the button, we need to scroll to a certain distance before showing the back to the top button.

Create a backtop component. The backtop component doesn’t need to scroll, so you don’t need to put it in the Better-Scroll component

  • 1. Create a component that returns the top button
<template>
  <div class="back-top" @click="backtopclick">
    <img src="~assets/img/common/top.png">
  </div>
</template>

<script>
  export default {
    name:'BackTop',
    methods:{
      backtopclick(){
      }
    }
  }
</script>

<style scoped>
  .back-top{
    position: fixed;
    right: 10px;
    bottom: 60px;
  }
  .back-top img{
    width: 43px;
  }
</style>

Copy the code

Use the backtop component in home (import and register without Posting code)

<Back-top @click.native="backclick" v-show="backtop"></Back-top>
Copy the code
data() {return{// Hide backtop by default:false,}}Copy the code

Backtop is set to true after scrolling to a certain position, using the same scroll method passed from the better Scroll function (this.scroll.

Scroll (position){// 1. Return the top implementation //position. // When y reaches 1000, set this.backtop totrue
      this.backtop = -position.y>1000
    },
    
Copy the code

So that’s showing the backtop button and showing the hidden implementation

2. Click the button to return to the top implementation

You need to listen for the button component’s click event backclick ()

<Back-top @click.native="backclick" v-show="backtop"></Back-top>
Copy the code

Define backclick () in methods

  backclick(){
      // this.$refs.scroll Select the Scroll component to use the inside scrollTo method (x, y, time) this.$refs. Scroll. Scroll. ScrollTo (0,0,500)},Copy the code

At this point, the need to click the button back to the top has been fulfilled

4. Next implement pull-up loading more

1. Listen to scroll to the bottom first.

In the above code, the event is defined in the Scroll component (the above component code has been added).

// 3. Implement loading more listener pull events this.scroll. On ('pullingUp',()=>{
            this.$emit('pullingUp')})Copy the code

Add @pullingUp=” loadMore “to the better Scroll component in the home component

  <Better-scroll class="content" @pullingUp="loadmore" >
  </ Better-scroll>
Copy the code

2. Define loadMore

To listen for events that roll to the bottom in the Better-Scroll, you can only call this function once. Loadmore is called when you roll to the bottom for the first time, and when you roll to the bottom again, it will not listen for the bottom. So in loadMore, we need to use the built-in Scroll finishPullUp() method so that we don’t call pullingUp only once

   loadmoreGetHomeGoods (this.cutype) this.gethomeGoods (this.cutype) this.gethomeGoods (this.cutype) this.$refs.scroll.scroll.finishPullUp()
      this.$refs.scroll.refresh()
    },
Copy the code

After we roll to the bottom, loadMore will be called to request the commodity data again, at this time, the area to be rolled will become higher, but the Better Scroll does not calculate the height again, so in loadMore, after we request the data, The refresh method of the Scroll object will be called to recalculate the height

Pull up here to load more functionality and you’re done.