Anwendung von BetterScroll in mobilen Scrolling-Szenarien

BetterScroll ist ein Open-Source-Plug-in (GitHub-Adresse), das sich auf die Lösung der Anforderungen verschiedener Scroll-Szenarien auf mobilen Endgeräten konzentriert. Es eignet sich für Anwendungsszenarien wie Scroll-Listen, Selektoren, Karussells, Indexlisten und Bildschirme Eröffnungsanleitung. Um diesen Szenarien gerecht zu werden, unterstützt es nicht nur die flexible Konfiguration von Trägheitsscrollen, Grenzrückprall, Ein- und Ausblendeffekten der Bildlaufleiste usw., um das Scrollen reibungsloser zu gestalten, sondern bietet auch viele API-Methoden und -Ereignisse, damit wir kann Scroll-Szenarien schneller realisieren, z. B. Pull-Down zum Aktualisieren und Pull-Up zum Laden.

Da es auf Basis von nativem JavaScript implementiert ist und nicht auf ein Framework angewiesen ist, kann es von nativem JavaScript referenziert oder mit dem aktuellen Front-End-MVVM-Framework kombiniert werden. Das Beispiel ist beispielsweise auf der offiziellen Website zu finden kombiniert mit Vue.

Schauen wir uns zunächst an, wie es das Scrollen reibungsloser macht.

Machen Sie das Scrollen flüssiger

Wenn Sie auf der mobilen Seite Overflow: Scroll verwendet haben, um einen Scroll-Container zu generieren, werden Sie feststellen, dass das Scrollen relativ stagniert und träge ist. Warum passiert das?

Weil wir uns schon lange an die Scroll-Erfahrung aktueller Mainstream-Betriebssysteme und Browser-Fenster gewöhnt haben, wird das Scrollen zum Rand zurückfallen, und nachdem der Finger aufgehört hat zu gleiten, wird er noch eine Weile weiterscrollen basierend auf der Trägheit. Wenn der Finger schnell gleitet, scrollt die Seite auch schnell. Es gibt jedoch keinen solchen nativen Scroll-Container, der den Leuten das Gefühl gibt, festzustecken.

Das Scroll-Erlebnis von BetterScroll

Probieren Sie das Scroll-Erlebnis von BetterScroll. Nachdem Sie die Adresse

erlebt haben, können Sie feststellen, dass sie nach dem Hinzufügen von Trägheitsscrollen, Kantenrückprall und anderen Effekten offensichtlich flüssiger und komfortabler ist. Wie werden diese Effekte erzielt?

Trägheitsscrollen

BetterScroll setzt den Trägheitsscroll noch eine Weile fort, wenn der Schiebevorgang des Benutzers endet. Schauen Sie sich zunächst die Funktion BScroll.prototype._end im Quellcode an. Dies ist die Verarbeitungsfunktion für die Ereignisse touchend, Mouseup, Touchcancel und Mousecancel, die die Logik darstellt, wenn der Scrollvorgang des Benutzers endet.

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

Die Funktion des obigen Codes besteht darin, die Impulsfunktion zu verwenden, um die Trägheitsscrolldistanz und -zeit zu berechnen, wenn das Trägheitsscrollen am Ende des Gleitvorgangs des Benutzers aktiviert wird. Diese Funktion berechnet die Scroll-Distanz basierend auf der Geschwindigkeit der Gleitbewegung des Benutzers und der Verzögerungsoption – Trägheitsverzögerung. Auch die Scroll-Zeit ist eine konfigurierbare Option.

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)
 ...
}

Kantenrückprall

Rückprall beim Überschreiten der Kante. Der erste Schritt besteht darin, die Scrollgeschwindigkeit zu verlangsamen Rebound. An die Grenze springen. Darunter ist der erste Schritt die Funktion BScroll.prototype._move im Quellcode. Dies ist die Verarbeitungsfunktion für Touchmove- und Mousemove-Ereignisse, die die Logik während des Gleitvorgangs des Benutzers darstellt.

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

Der zweite Schritt besteht darin, die Funktion BScroll.prototype.resetPosition aufzurufen, um zur Grenze zurückzukehren.

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)
  ...
 }

Reibungsloses Scrollen ist nur die Grundlage für die Bereitstellung einer großen Anzahl allgemeiner/kundenspezifischer Optionen, API-Methoden und Ereignisse, um verschiedene Scroll-Anforderungen effizienter zu gestalten.

Wie man es auf verschiedene Nachfrageszenarien anwendet

Nehmen wir nun die Verwendung von Vue als Beispiel, um über die Haltung von BetterScroll in verschiedenen Szenarien zu sprechen.

Normale Bildlaufliste

Zum Beispiel gibt es die folgende Liste:

{{item}}

Wir möchten einen vertikalen Bildlauf durchführen und müssen nur eine einfache Initialisierung durchführen Der Behälter.

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

Bei der Verwendung von BetterScroll in Vue ist zu beachten, dass die Listen-DOM-Elemente nicht generiert werden, bevor die Listenwiedergabe in der Vue-Vorlage abgeschlossen ist. Sie müssen also sicherstellen, dass die Listenwiedergabe abgeschlossen ist. Eine BScroll-Instanz kann erst später erstellt werden, daher ist in Vue der beste Zeitpunkt zum Initialisieren von BScroll der nextTick von mouted.

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

Nach der Initialisierung kann dieser Wrapper-Container ordnungsgemäß scrollen und die von ihm bereitgestellten API-Methoden und Ereignisse können über die BScroll-Instanz this.scroll verwendet werden.

Im Folgenden werden einige häufig verwendete Optionen, Methoden und Ereignisse vorgestellt.

Bildlaufleiste

Scrollbar-Option wird zum Konfigurieren der Bildlaufleiste verwendet. Der Standardwert ist false. Wenn es auf „true“ oder ein Objekt gesetzt ist, werden Bildlaufleisten aktiviert. Sie können das Fade-Attribut auch verwenden, um zu konfigurieren, ob die Bildlaufleiste beim Scrollen ein- und ausgeblendet wird oder angezeigt bleibt.

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

Der spezifische Effekt ist im Beispiel einer gewöhnlichen Bildlaufliste zu sehen.

PullDownRefresh

Mit der Option pullDownRefresh wird die Pulldown-Aktualisierungsfunktion konfiguriert. Bei der Einstellung „true“ oder „Object“ ist die Pulldown-Aktualisierung aktiviert. Sie können den oberen Pulldown-Abstand (Schwellenwert) konfigurieren, um den Aktualisierungszeitpunkt und den Rückprall-Aufenthaltsabstand (Stopp) zu bestimmen.

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

Listen Aktualisieren Sie die Daten zum PullDown-Ereignis. Rufen Sie nach dem Aktualisieren der Daten die Methode „finishPullDown()“ auf, um zum oberen Rand zurückzukehren.

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

Der spezifische Effekt ist in der normalen Bildlaufliste zu sehen – Beispiel.

PullUpLoad

pullUpLoad-Option wird zum Konfigurieren der Pullup-Ladefunktion verwendet. Wenn es auf „true“ oder ein Objekt gesetzt ist, kann das Pullup-Laden aktiviert werden und der Abstandsschwellenwert von unten kann konfiguriert werden, um den Zeitpunkt des Ladestarts zu bestimmen

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

Hören Sie sich das Pullup-Ereignis an und laden Sie neu Daten.

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

Der spezifische Effekt ist im Beispiel einer gewöhnlichen Bildlaufliste zu sehen.

Selektor

Radoption wird verwendet, um den Selektor zu aktivieren und zu konfigurieren. Sie können den aktuell ausgewählten Index des Selektors (selectedIndex), die Krümmung der Liste (rotate) und die Anpassungszeit zum Wechseln ausgewählter Elemente (adjustTime) konfigurieren.

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

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

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

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]
 }
},

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

轮播图

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)

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

特殊场景

除了普通滚动列表、选择器、轮播图等基础滚动场景，还可以利用 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
  }
 }
})

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

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

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

开屏引导

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

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

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

自由滚动

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

options.freeScroll = true

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

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

小结

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

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

相关推荐：

微信小程序YDUI的ScrollTab组件滚动选项卡效果详解

jquery使用iscroll实现上拉、下拉加载刷新实例分享

vue滚动轴插件better-scroll详解

Das obige ist der detaillierte Inhalt vonAnwendung von BetterScroll in mobilen Scrolling-Szenarien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!