Learning and using better-scroll

Learning and initialization of better-scroll

introduce

In daily mobile development, the processing of list scrollbars is a very common requirement. Using better-scroll for horizontal and vertical scrollbars can help us realize it in development.

What is better-scroll

better-scroll is a mobile scrolling solution, it can not only do ordinary scrolling list, but also can do carousel cast, prcker and so on.

The scrolling principle of better-scroll

The scroll bar of the original browser is very common. When the height of the page content exceeds the height of the viewport, a vertical scroll bar will appear, and when it exceeds the width of the viewport, a horizontal scroll bar will appear, that is, when our viewport cannot display When the content is displayed, the scroll bar will be used to let the user scroll the screen to see the remaining content. The same is true for better-scroll.

The most common structure of better-scroll

HTML structure of better-scroll
The following picture may be more intuitive:
better-scroll scrolling principle
the green part is the wrapper, which is the parent container, and it will have a fixed height. The yellow part is content, which is the first child element of the parent container, and its height will increase with the size of the content. Then, when the height of the content does not exceed the height of the parent container, it cannot be scrolled, and once it exceeds the height of the parent container, we can scroll the content area, which is the scrolling principle of BetterScroll.

Initialize better-scroll

Used in html files
Referenced in script tags, initialized, and directly referenced
[ Official website address ]
Initialize better-scroll
Use better-scroll in Vue

Install

npm install @better-scroll/core --save

Use the plugin in main


import BScroll from '@better-scroll/core'
import Pullup from '@better-scroll/pull-up'
BScroll.use(Pullup)

introduce

import BScroll from '@better-scroll/core'

Initialize
html code:

<template>
<div class="wrapper">
    <ul class="content">
    	...
    </ul>
</div>
</template>

script code:

<script>
import BScroll from '@better-scroll/core'
export default {
    
    
    data(){
    
    
        return{
    
    
            scroll:null
        }
    },
    mounted(){
    
    
        this.scroll = new BScroll(document.querySelector(".wrapper"),{
    
    }),
    }
}
</script>

Vue.js provides us with an interface to get DOM objects - vm.refs $r e f s . Here, we$ access the DOM object $through$ $t$ $h$ $i$ $s$ $. refs. wrapper, and we$ $initialize$ $in the mounted hook function .$ $Initialize b e t t e r in the callback function of n e x t T i ck - s c r o l l . Because at this time, the DOM of the wrapper has been rendered, we can correctly calculate the height of it and its inner c o n tent_________make sure to scroll normal . Here t h i s .$ nextTick is an asynchronous function. In order to ensure that the DOM has been rendered, interested students can learn about its internal implementation details. The bottom layer uses MutationObserver or setTimeout(fn, 0) $.$ In fact, it is also possible to replace this.$nextTick with setTimeout(fn, 20) here (20 ms is an experience value, and each Tick is about 17 ms), which is insensitive to user experience.

A simple scroll to achieve better-scroll

By default, betterScroll cannot monitor the scrolling position
probe detection in real time , [0, 1 multi-detection real-time position], [2: detection] [3] detect as long as it is scrolling, when the input of 2 Sometimes, it is detected during the scrolling process of the finger, and is not detected during the inertial scrolling process after the finger leaves.
Simple example:
A simple pull-up loading scroll for better-scroll
code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content{
    
    
            height: 200px;
            background-color: aquamarine;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="content">
            <ul>
                <button>按钮</button>
                <li>列表数据1</li>*1000
            </ul>
        </div>
    </div>
    <script src="./better-scroll.js"></script>
    <script>
        const bs = BetterScroll.createBScroll('.content', {
    
    
            probeType:3, //只要是滚动都侦测,当传入2的时候，在手指滚动的过程中侦测，手指离开后的惯性滚动的过程不侦测
            click:true,  //滚动内容中允许有可以点击的内容
            pullUpLoad:true
        })
        bs.on('scroll',(position)=>{
    
    
             //console.log(position);
        })
        bs.on("pullingUp",()=>{
    
                
            console.log("上拉加载更多");
            //先去发送网络请求，请求更多页的数据
            //等数据请求完成，并且将新的数据展示出来后
            setTimeout(()=>{
    
    
                bs.finishPullUp()
            },2000)
        })
    </script>
</body>
</html>