Shulou(Shulou.com)06/03 Report--

This article is about how to use the mobile scrolling plug-in BetterScroll. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Make scrolling smoother

On the mobile side, if you have used overflow: scroll to generate a scrolling container, you will find that its scrolling is stuttered and sluggish. Why did this happen?

Because we are used to the scrolling experience of the current mainstream operating systems and browser windows, such as rebound when scrolling to the edge, continuing to scroll according to inertia for a while after the finger stops sliding, and the page scrolls quickly when the finger scrolls quickly. But this kind of native rolling container does not have, it will make people feel stuttered.

The scrolling experience of BetterScroll

Try the scrolling experience of BetterScroll. Experience address

It can be found that after increasing the effects such as inertia rolling and edge springback, it is much smoother and more comfortable. So how are these effects achieved?

Inertia rolling

BetterScroll will continue to scroll for a period of inertia at the end of the user's slide operation. First, take a look at the BScroll.prototype._end function in the source code, which is the handler for the touchend, mouseup, touchcancel, and mousecancel events, that is, the logic at the end of the user's scrolling operation.

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

The function of the above code is to calculate the inertial scrolling distance and time with the momentum function if inertial scrolling needs to be turned on at the end of the user sliding operation. This function calculates the scrolling distance based on the speed of the user's sliding operation and the deceleration option-inertia deceleration. As for scrolling time, it is also a configurable 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) ...}边缘回弹 超过边缘时的回弹，有两个处理步骤，第一步是滚动到超过边界时速度要变慢，第二步是回弹到边界。其中，第一步是在源码的 BScroll.prototype._move 函数，这是 touchmove 和 mousemove 事件的处理函数，也就是在用户滑动操作过程中的逻辑。 // Slow down or stop if outside of the boundariesif (newY >

0 | | newY

< this.maxScrollY) { if (this.options.bounce) { newY = this.y + deltaY / 3 } else { newY = newY >

0? 0: this.maxScrollY}}

The second step is to call the BScroll.prototype.resetPosition function to bounce back to the boundary.

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) ... } 流畅的滚动仅仅是基础，BetterScoll 真正的能力在于：提供了大量通用 / 定制的 option 选项 、 API 方法和事件，让各种滚动需求实现起来更高效。 如何应用于各种需求场景 下面，以结合 Vue 的使用为例，说一下 BetterScroll 在各种场景下的姿势。 普通滚动列表 比如，有如下列表： {{item}} 我们想要让它垂直滚动，只需要对该容器进行简单的初始化。 import BScroll from 'better-scroll'const options = { scrollY: true // 因为scrollY默认为true，其实可以省略} this.scroll = new BScroll(this.$refs.wrapper, options) 对于 Vue 中使用 BetterScroll，有一个需要注意的点是，因为在 Vue 模板中列表渲染还没完成时，是没有生成列表 DOM 元素的，所以需要在确保列表渲染完成以后，才能创建 BScroll 实例，因此在 Vue 中，初始化 BScroll 的最佳时机是 mouted 的 nextTick。 // 在 Vue 中，保证列表渲染完成时，初始化 BScrollmounted() { setTimeout(() =>

{this.scroll = new BScroll (this.$refs.wrapper, options)}, 20)}

Once initialized, the wrapper container scrolls gracefully, and the API methods and events it provides can be used through the BScroll instance this.scroll.

Here are a few common options, methods, and events.

Scroll bar

The scrollbar option is used to configure the scroll bar, which defaults to false. When set to true or an Object, open the scroll bar. You can also use the fade property to configure whether the scroll bar fades in and out with the scroll operation, or whether it is displayed all the time.

/ / fade defaults to true, scroll bar fades in and out options.scrollbar = true// scroll bar always shows options.scrollbar = {fade: false} this.scroll = new BScroll (this.$refs.wrapper, options)

For the specific effect, please see the ordinary scrolling list-example.

Drop-down refresh

The pullDownRefresh option is used to configure the drop-down refresh feature. When set to true or an Object, pull-down refresh is enabled. You can configure the top drop-down distance (threshold) to determine the refresh time and the springback stay distance (stop).

Options.pullDownRefresh = {threshold: 50, / / when pulling over the top 50px, the pullingDown event stop: 20 / / is triggered to refresh the data, and the springback stays at the position where there is 20px at the top} this.scroll = new BScroll (this.$refs.wrapper, options)

Listen for pullingDown events and refresh data. And after refreshing the data, call the finishPullDown () method to bounce back to the top boundary

This.scroll.on ('pullingDown', () = > {/ / during the refresh process, the springback stays at the location where there is still 20px at the top, RefreshData () .then ((newData) = > {this.data = newData / / after refreshing the data, call the finishPullDown method and bounce back to the top this.scroll.finishPullDown ()}))

For the specific effect, please see the ordinary scrolling list-example.

Pull up and load

The pullUpLoad option, which is used to configure the pull-up load feature. When set to true or an Object, pull-up loading can be enabled, and the distance threshold (threshold) from the bottom can be configured to determine the time to start loading.

Options.pullUpLoad = {threshold:-20 / / trigger the pullingUp event} this.scroll = new BScroll (this.$refs.wrapper, options) when the pull exceeds the bottom 20px

Listen for pullingUp events and load new data.

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

For the specific effect, please see the ordinary scrolling list-example.

Selector

The wheel option to open and configure the selector. The currently selected index (selectedIndex) of the configurable selector, the curved radians of the list (rotate), and the adjustment time (adjustTime) for switching selections.

Options.wheel = {selectedIndex: 0, rotate: 25, adjustTime: 400} / / initialize each column of the selector this.wheels [I] = new BScroll (wheelWrapper.children [I], options)

For the specific effect, please see the selector-example.

Among them, the linkage selector needs to monitor the selection of each selection list to change the other selection list.

Data () {return {tempIndex: [0,0,0]}},. / / monitors the selection of this.wheels [I] .on ('scrollEnd', () = > {this.tempIndex.splice (I, 1, this.wheels [I]. GetSelectedIndex ()}). / / based on the current selection Determine the contents of the other selection list 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]}}

The specific effect can be seen in the selector-the linkage selector in the example.

Broadcast map

The snap option, which is used to open and configure the broadcast image. You can configure whether the broadcast graph is played in a loop (loop), the width and height of each page (stepX) and height (stepY), the switching threshold (threshold), and the switching speed (speed).

Options = {scrollX: true, snap: {loop: true, / / enable looping playback stepX: 200, / / the width of each page is 200px stepY: 100, / / the height of each page is 100px threshold: 0.3, / / when the scrolling distance exceeds 30% of the width / height, switch pictures speed: 400 / / switch animation duration 400ms} this.slide = BScroll (this.$refs.slide, options)

For the specific effect, please see the round broadcast picture-example.

Special scene

In addition to basic scrolling scenarios such as ordinary scrolling lists, selectors, and broadcast images, you can also make use of the capabilities provided by BetterScroll to do some special scenarios.

Index list

The index list first needs to update the current index by listening to the area of which index it scrolls to in real time during scrolling. In this scenario, we can use the probeType option, and when this option is set to 3, scroll events are dispatched in real time throughout scrolling. To get the position in the scrolling process.

Options.probeType = 3this.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}})

When the index is clicked, use the scrollToElement () method to scroll to the index area.

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

For more information, please see Index list-example.

Open screen boot

The open-screen guide is actually a kind of horizontal rolling rotation picture which is not automatically played in a loop.

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

For the specific effect, please see Open screen Boot-example. Since this requirement scenario is generally available only on the mobile end, it is best to view the effect in mobile mode.

Free scrolling

The freeScroll option, which enables free scrolling, allows you to scroll horizontally and vertically at the same time, without being limited to a certain direction.

Options.freeScroll = true

It is also important to note that this option has no effect when eventPassthrough is set to keep native scrolling.

Thank you for reading! This is the end of the article on "how to use the mobile scrolling plug-in BetterScroll". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.