Uso del complemento // better-scroll (BScroll / rolling plug-in) y su uso en vue

Uno, BScroll

Que es BScroll

better-scroll, inspirado en iscroll, admite más funciones y tiene un mejor rendimiento de desplazamiento
. La dirección original del complemento en github.
BetterScroll es un complemento que se centra en resolver las necesidades de varios escenarios de desplazamiento en el terminal móvil (que ya es compatible con PC ). Su núcleo es la implementación de iscroll tomada de él. Su diseño de API es básicamente compatible con iscroll. Sobre la base de iscroll, ha ampliado algunas características y realizado algunas optimizaciones de rendimiento.

BetterScroll se implementa utilizando JavaScript puro, lo que significa que no tiene dependencia.

Principio de balanceo

Altura del contenido> altura del contenedor principal, puede desplazarse.

instalación

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', {
    
    })

Empezar

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

En segundo lugar, el uso de BScroll en vue

El acceso al objeto DOM a través de este $R\; \&\; ltEFS.WR\; \&\; ltAPPER\; \&\; ltaccesopidióaDOMdelobjetoenmOn-TTEDengancharsub-funciónnúmeroen,THIS.$ Callback nextTick la función inicializa Better-Scroll
(el this. $ nextTick es una función asincrónica para garantizar que el DOM se haya renderizado)

<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>

Procesamiento de datos asincrónico

Los datos de la lista a menudo se obtienen de forma asincrónica, por lo que el tiempo para inicializar el mejor desplazamiento debe ser después de que se obtienen los datos.

<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>

El requestData aquí es un pseudocódigo, y su función es iniciar una solicitud http para obtener datos del servidor, y esta función devuelve una promesa (en proyectos reales, podemos usar axios o vue-resource). Después de obtener los datos, debemos inicializar el mejor desplazamiento de forma asincrónica, porque Vue se basa en datos. Los cambios de datos de Vue (this.data = res.data) en la representación de la página es un proceso asincrónico, nosotros El tiempo de inicialización of es después de que se vuelva a renderizar el DOM, por lo que aquí se usa este. $ nextTick, por supuesto, también es posible reemplazarlo con setTimeout (fn, 20).

¿Por qué se solicitan los datos en la función de gancho creada en lugar de la función de gancho montado? Debido a que requestData es para enviar una solicitud de red, que es un proceso asincrónico, cuando se reciben los datos de respuesta, el DOM de Vue ya se ha procesado, pero los datos cambian -> La reproducción del DOM sigue siendo un proceso asincrónico, por lo que incluso en nuestro After Al obtener los datos, el mejor desplazamiento debe inicializarse de forma asincrónica.