Application de BetterScroll dans les scénarios de défilement mobile-js tutoriel-php.cn

BetterScroll est un plug-in open source (adresse GitHub) qui se concentre sur la résolution des besoins de divers scénarios de défilement sur le terminal mobile. Il convient aux scénarios d'application tels que les listes déroulantes, les sélecteurs, les carrousels, les listes d'index et les écrans. conseils d'ouverture. Afin de répondre à ces scénarios, il prend non seulement en charge une configuration flexible du défilement inertiel, du rebond des limites, des effets de fondu d'entrée et de sortie de la barre de défilement, etc., pour rendre le défilement plus fluide, mais fournit également de nombreuses méthodes et événements API afin que nous peut réaliser des scénarios de défilement plus rapidement, tels que le pull-down pour actualiser et le pull-up pour charger.

Parce qu'il est implémenté sur la base de JavaScript natif et ne repose sur aucun framework, il peut être référencé par JavaScript natif ou combiné avec le framework frontal MVVM actuel. Par exemple, l'exemple sur son site officiel est. combiné avec Vue.

Tout d’abord, voyons comment cela rend le défilement plus fluide.

Rendre le défilement plus fluide

Côté mobile, si vous avez utilisé overflow: scroll pour générer un conteneur de défilement, vous constaterez que son défilement est relativement bloqué et lent. Pourquoi cela arrive-t-il ?

Parce que nous sommes habitués depuis longtemps à l'expérience de défilement des systèmes d'exploitation et des fenêtres de navigateur traditionnels actuels. Par exemple, le défilement vers le bord rebondira et une fois que le doigt cessera de glisser, il continuera à défiler pendant un certain temps. basé sur l'inertie Lorsque le doigt glisse rapidement, la page défile également rapidement. Mais ce type de conteneur de défilement natif n'existe pas, ce qui fera que les gens se sentiront coincés.

L'expérience de défilement de BetterScroll

Essayez l'expérience de défilement de BetterScroll. Après avoir expérimenté l'adresse

, vous constaterez qu'après l'ajout du défilement inertiel, du rebond des bords et d'autres effets, elle est évidemment plus fluide et plus confortable. Alors, comment ces effets sont-ils obtenus ?

Défilement inertiel

BetterScroll continuera à défiler par inertie pendant un certain temps lorsque l'opération de glissement de l'utilisateur se terminera. Tout d'abord, jetez un œil à la fonction BScroll.prototype._end dans le code source. Il s'agit de la fonction de traitement des événements touchend, mouseup, touchcancel et mousecancel, qui est la logique à la fin de l'opération de défilement de l'utilisateur.

BScroll.prototype._end = function (e) {
  ...
  if (this.options.momentum && duration < this.options.momentumLimitTime && (absDistY > this.options.momentumLimitDistance || absDistX > this.options.momentumLimitDistance)) {
   let momentumX = this.hasHorizontalScroll ? momentum(this.x, this.startX, duration, this.maxScrollX, this.options.bounce ? this.wrapperWidth : 0, this.options)
    : {destination: newX, duration: 0}
   let momentumY = this.hasVerticalScroll ? momentum(this.y, this.startY, duration, this.maxScrollY, this.options.bounce ? this.wrapperHeight : 0, this.options)
    : {destination: newY, duration: 0}
   newX = momentumX.destination
   newY = momentumY.destination
   time = Math.max(momentumX.duration, momentumY.duration)
   this.isInTransition = 1
  }
  ...
}

Copier après la connexion

La fonction du code ci-dessus est d'utiliser la fonction élan pour calculer la distance et le temps de défilement inertiel si le défilement inertiel est activé à la fin de l'opération de glissement de l'utilisateur. Cette fonction calcule la distance de défilement en fonction de la vitesse de glissement de l'utilisateur et de l'option de décélération - décélération inertielle Quant au temps de défilement, c'est également une option configurable.

function momentum(current, start, time, lowerMargin, wrapperSize, options) { 
 ...
 let distance = current - start
 let speed = Math.abs(distance) / time
 ...
 let duration = swipeTime
 let destination = current + speed / deceleration * (distance < 0 ? -1 : 1)
 ...
}

Copier après la connexion

Rebond du bord

Rebond en cas de dépassement du bord Il y a deux étapes de traitement La première étape consiste à ralentir la vitesse de défilement lorsqu'elle dépasse le bord. rebondir jusqu'à la limite. Parmi eux, la première étape est la fonction BScroll.prototype._move dans le code source. Il s'agit de la fonction de traitement des événements touchmove et mousemove, qui est la logique lors de l'opération de glissement de l'utilisateur.

// Slow down or stop if outside of the boundaries
if (newY > 0 || newY < this.maxScrollY) {
  if (this.options.bounce) {
    newY = this.y + deltaY / 3
  } else {
    newY = newY > 0 ? 0 : this.maxScrollY
  }
}

Copier après la connexion

La deuxième étape consiste à appeler la fonction BScroll.prototype.resetPosition pour rebondir vers la limite.

BScroll.prototype.resetPosition = function (time = 0, easeing = ease.bounce) {
  ...
  let y = this.y
  if (!this.hasVerticalScroll || y > 0) {
   y = 0
  } else if (y < this.maxScrollY) {
   y = this.maxScrollY
  }
  ...
  this.scrollTo(x, y, time, easeing)
  ...
 }

Copier après la connexion

Le défilement fluide n'est que la base. La véritable capacité de BetterScoll réside dans la fourniture d'un grand nombre d'options générales/personnalisées, de méthodes API et d'événements pour rendre diverses exigences de défilement plus efficaces.

Comment l'appliquer à divers scénarios de demande

Maintenant, prenons l'utilisation de Vue comme exemple pour parler de la posture de BetterScroll dans divers scénarios.

Liste défilante normale

Par exemple, il y a la liste suivante :

{{item}}

Copier après la connexion

Nous voulons la faire défiler verticalement, et il suffit d'effectuer une simple initialisation de le conteneur.

import BScroll from &#39;better-scroll&#39;
const options = {
 scrollY: true // 因为scrollY默认为true，其实可以省略
}
this.scroll = new BScroll(this.$refs.wrapper, options)

Copier après la connexion

Une chose à noter lors de l'utilisation de BetterScroll dans Vue est que les éléments DOM de la liste ne sont pas générés avant que le rendu de la liste ne soit terminé dans le modèle Vue, vous devez donc vous assurer que le rendu de la liste est terminé. L'instance BScroll ne peut être créée que plus tard, donc dans Vue, le meilleur moment pour initialiser BScroll est le prochain Tick de mouted.

// 在 Vue 中，保证列表渲染完成时，初始化 BScroll
mounted() {
  setTimeout(() => {
   this.scroll = new BScroll(this.$refs.wrapper, options)
  }, 20)
},

Copier après la connexion

Après l'initialisation, ce conteneur wrapper peut défiler gracieusement, et les méthodes et événements API qu'il fournit peuvent être utilisés via l'instance BScroll this.scroll.

Ce qui suit présente plusieurs options, méthodes et événements couramment utilisés. L'option

Barre de défilement

scrollbar est utilisée pour configurer la barre de défilement. La valeur par défaut est false. Lorsqu'il est défini sur true ou sur un objet, active les barres de défilement. Vous pouvez également utiliser l'attribut fade pour configurer si la barre de défilement apparaît et disparaît en fondu avec l'opération de défilement ou si elle reste affichée.

// fade 默认为 true，滚动条淡入淡出
options.scrollbar = true
// 滚动条一直显示
options.scrollbar = {
 fade: false
}
this.scroll = new BScroll(this.$refs.wrapper, options)

Copier après la connexion

L'effet spécifique peut être vu dans l'exemple de liste déroulante ordinaire. L'option

PullDownRefresh

pullDownRefresh est utilisée pour configurer la fonction d'actualisation déroulante. Lorsqu'il est défini sur true ou sur un objet, l'actualisation déroulante est activée. Vous pouvez configurer la distance déroulante supérieure (seuil) pour déterminer le moment de l'actualisation et la distance de maintien du rebond (arrêt)

options.pullDownRefresh = {
 threshold: 50, // 当下拉到超过顶部 50px 时，触发 pullingDown 事件
 stop: 20 // 刷新数据的过程中，回弹停留在距离顶部还有 20px 的位置
}
this.scroll = new BScroll(this.$refs.wrapper, options)

Copier après la connexion

Écouter. à l'événement pullDown, actualisez les données. Et après avoir actualisé les données, appelez la méthode finishPullDown() pour rebondir vers la bordure supérieure

this.scroll.on('pullingDown', () => {
 // 刷新数据的过程中，回弹停留在距离顶部还有20px的位置
 RefreshData()
  .then((newData) => {
   this.data = newData
   // 在刷新数据完成之后，调用 finishPullDown 方法，回弹到顶部
   this.scroll.finishPullDown()
 })
})

Copier après la connexion

L'effet spécifique peut être vu dans la liste déroulante ordinaire - exemple. L'option

PullUpLoad

pullUpLoad est utilisée pour configurer la fonction de chargement pullup. Lorsqu'il est défini sur true ou sur un objet, le chargement pull-up peut être activé et le seuil de distance à partir du bas peut être configuré pour déterminer le moment du début du chargement

options.pullUpLoad = {
 threshold: -20 // 在上拉到超过底部 20px 时，触发 pullingUp 事件
}
this.scroll = new BScroll(this.$refs.wrapper, options)

Copier après la connexion

Écoutez l'événement pullUp et chargez le nouveau données.

this.scroll.on('pullingDown', () => {
 loadData()
  .then((newData) => {
   this.data.push(newData)
 })
})

Copier après la connexion

L'effet spécifique peut être vu dans l'exemple de liste déroulante ordinaire. L'option de roue

Sélecteur

est utilisée pour activer et configurer le sélecteur. Vous pouvez configurer l'index actuellement sélectionné du sélecteur (selectedIndex), la courbure de la liste (rotation) et le temps d'ajustement pour changer les éléments sélectionnés (adjustTime).

options.wheel = {
 selectedIndex: 0,
 rotate: 25,
 adjustTime: 400
}
// 初始化选择器的每一列
this.wheels[i] = new BScroll(wheelWrapper.children[i], options)

Copier après la connexion

具体效果可见选择器 - 示例。

其中联动选择器，需要监听每个选择列表的选择，来改变其他选择列表。

data() {
  return {
   tempIndex: [0, 0, 0]
  }
},
...
// 监听每个选择列表的选择
this.wheels[i].on('scrollEnd', () => {
 this.tempIndex.splice(i, 1, this.wheels[i].getSelectedIndex())
})
...
// 根据当前选择项，确定其他选择列表的内容
computed: {
 linkageData() {
  const provinces = provinceList
  const cities = cityList[provinces[this.tempIndex[0]].value]
  const areas = areaList[cities[this.tempIndex[1]].value]

  return [provinces, cities, areas]
 }
},

Copier après la connexion

具体效果可见选择器 - 示例中的联动选择器。

轮播图

snap 选项，用于开启并配置轮播图。可配置轮播图是否循环播放（loop），每页的宽度（stepX）和高度（stepY），切换阈值（threshold），以及切换速度（speed）。

options = {
 scrollX: true,
 snap: {
  loop: true, // 开启循环播放
  stepX: 200, // 每页宽度为 200px
  stepY: 100, // 每页高度为 100px
  threshold: 0.3, // 滚动距离超过宽度/高度的 30% 时切换图片
  speed: 400 // 切换动画时长 400ms
 }
}
this.slide = BScroll(this.$refs.slide, options)

Copier après la connexion

具体效果可见轮播图 - 示例。

特殊场景

除了普通滚动列表、选择器、轮播图等基础滚动场景，还可以利用 BetterScroll 提供的能力，做一些特殊场景。

索引列表

索引列表，首先需要在滚动过程中实时监听滚动到哪个索引的区域了，来更新当前索引。在这种场景下，我们可以使用 probeType 选项，当此选项设置为 3 时，会在整个滚动过程中实时派发 scroll 事件。从而获取滚动过程中的位置。

options.probeType = 3
this.scroll = new BScroll(this.$refs.wrapper, options)
this.scroll.on('scroll', (pos) => {
 const y = pos.y
 for (let i = 0; i < listHeight.length - 1; i++) {
  let height1 = listHeight[i]
  let height2 = listHeight[i + 1]
  if (-y >= height1 && -y < height2) {
   this.currentIndex = i
  }
 }
})

Copier après la connexion

当点击索引时，使用 scrollToElement()方法滚动到该索引区域。

scrollTo(index) {
 this.$refs.indexList.scrollToElement(this.$refs.listGroup[index], 0)
}

Copier après la connexion

具体效果可见索引列表 - 示例。

开屏引导

开屏引导，其实就是一种不自动循环播放的横向滚动轮播图而已。

options = {
 scrollX: true,
 snap: {
  loop: false
 }
}
this.slide = BScroll(this.$refs.slide, options)

Copier après la connexion

具体效果可见开屏引导 - 示例。因为此需求场景一般只有移动端才有，所以最好在手机模式下看效果。

自由滚动

freeScroll 选项，用于开启自由滚动，允许横向和纵向同时滚动，而不限制在某个方向。

options.freeScroll = true

Copier après la connexion

另外需要注意的是，此选项在eventPassthrough 设置了保持原生滚动时无效。

具体效果可见自由滚动-示例。

小结

BetterScroll 可以用于几乎所有滚动场景，本文仅介绍了在一些典型场景下的使用姿势。

作为一款旨在解决移动端滚动需求的插件，BetterScroll 开放的众多选项、方法和事件，其实，就是提供了一种让我们更加快捷、灵活、精准时机地处理滚动的能力。