Plug-in//better-scroll (BScroll/rolling plug-in) usage and its use in vue

One, BScroll

What is BScroll

better-scroll, inspired by iscroll, it supports more functions and has better scrolling performance
. The original address of the plug-in on github.
BetterScroll is a plug- in that focuses on solving the needs of various scrolling scenarios on the mobile terminal (which already supports PC). Its core is the implementation of iscroll borrowed from it. Its API design is basically compatible with iscroll. On the basis of iscroll, it has expanded some features and made some performance optimizations.

BetterScroll is implemented using pure JavaScript, which means it is dependency-free.

Rolling principle

Content height> parent container height, you can scroll.

installation

npm install better-scroll -S  # 安装带有所有插件的 BetterScroll

npm install @better-scroll/core # 核心滚动，大部分情况可能只需要一个简单的滚动

import BetterScroll from 'better-scroll'

let bs = new BetterScroll('.wrapper', {
    
    
  movable: true,
  zoom: true
})

import BScroll from '@better-scroll/core'
let bs = new BScroll('.wrapper', {
    
    })

Get started

<div class="wrapper">
  <ul class="content">
    <li>...</li>
    <li>...</li>
    ...
  </ul>
  <!-- 这里可以放一些其它的 DOM，但不会影响滚动 -->
</div>

Second, the use of BScroll in vue

Access to the DOM object through this. $R\; \&\; ltEFS.WR\; \&\; ltAPPER\; \&\; ltaccessaskedtoDOMof\; theobjectinmOn-UTEDhooksub-functionnumberin,THIS.$ nextTick callback function initializes Better-Scroll
(the this .$nextTick is an asynchronous function to ensure that the DOM has been rendered)

<template>
  <div class="wrapper" ref="wrapper">
    <ul class="content">
      <li>...</li>
      <li>...</li>
      ...
    </ul>
  </div>
</template>
<script>
  import BScroll from 'better-scroll'
  export default {
    
    
    mounted() {
    
    
      this.$nextTick(() => {
    
    
        this.scroll = new Bscroll(this.$refs.wrapper, {
    
    })
      })
    }
  }
</script>

Asynchronous data processing

The data of the list is often obtained asynchronously, so the time to initialize the better-scroll needs to be after the data is obtained

<template>
	<div class="wrapper" ref="wrapper">
		<ul>
			<li v-for="item in data">{
    
    {
    
    item}}</li>
		</ul>
	</div>
</template>

<script>
	import BScroll from 'better-scroll'
	export default {
    
    
		data() {
    
    
			return {
    
    
				data: []
			}
		},
		created() {
    
    
			requestData().then((res) => {
    
    
				this.data = res.data
				this.$nextTick(() => {
    
    
					this.scroll = new Bscroll(this.$refs.wrapper, {
    
    })
				})
			}) 
		}
	}
</script>

The requestData here is pseudo-code, and its role is to initiate an http request to obtain data from the server, and this function returns a promise (in actual projects, we may use axios or vue-resource). After we get the data, we need to initialize the better-scroll asynchronously, because Vue is data-driven. Vue data changes (this.data = res.data) to the page re-rendering is an asynchronous process, we The initialization time of is after the DOM is re-rendered, so this.$nextTick is used here, of course, it is also possible to replace it with setTimeout(fn, 20).

Why is the data requested in the created hook function instead of the mounted hook function? Because requestData is to send a network request, which is an asynchronous process, when the response data is received, Vue's DOM has already been rendered, but the data change —> DOM re-rendering is still an asynchronous process, so even in our After getting the data, the better-scroll must be initialized asynchronously.