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

It is a common requirement to deal with scrolling lists in our daily mobile project development. Didi, for example, can scroll vertically as shown in the figure.

Wechat-> wallet-> DiDi "experience effect.

What better-scroll better-scroll is a mobile scrolling solution it is based on iscroll rewriting it and iscroll the main difference here. Better-scroll is also powerful to make not only ordinary scrolling lists but also webcast maps, picker, and so on.

Many students may have used better-scroll. The question I received the most feedback is

Not being able to scroll is a phenomenon. We need to figure out the root cause of this. Before that, let's take a look at the scrolling principle of the browser.

So the same is true for better-scroll. Let's first take a look at the common html structure of better-scroll.

.........

In order to be more intuitive, let's look at another picture.

A fixed height. The × × part is content, which is the first child element of the parent container, and its height increases with the size of the content. So when the height of the content does not exceed the height of the parent container, it cannot be scrolled, and once it exceeds the height of the parent container, we can scroll the content area. This is the scrolling principle of better-scroll.

Import BScroll from 'better-scroll' let wrapper = document.querySelector (' .wrapper') let scroll = new BScroll (wrapper, {})

Documentation for better-scroll.

The scroll.refresh () method recalculates to ensure that the scrolling effect is normal. So the reason why the students reported that the better-scroll could not scroll was probably due to the wrong time to initialize the better-scroll or the fact that the better-scroll was not recalculated when the DOM structure sent changes.

Vue.js is no stranger. What kind of spark will better-scroll have when he meets Vue?

Many students began to get in touch with better-scroll because of one of my teaching courses-"Vue.js high imitation ele.me takeout App". In that course, we combined better-scroll and Vue to achieve a lot of list scrolling. The usage in Vue is as follows. Import BScroll from 'better-scroll' export default {mounted () {this.$nextTick (()) = > {this.scroll = new Bscroll (this.$refs.wrapper, {})}

Js provides us with an interface to get DOM objects-- vm.$refs. Here we have access to the DOM object through this.$refs.wrapper and we initialize better-scroll in the callback function of this.$nextTick in the hook function mounted. Because at this time the DOM of wrapper has been rendered, we can correctly calculate it and the height of its inner content to make sure it scrolls properly.

This.$nextTick is an asynchronous function to ensure that DOM has been rendered interested students can understand its internal implementation details of the underlying use of MutationObserver or setTimeout (fn, 0). In fact, we can also replace this.$nextTick with setTimeout (fn, 20) here. 20 ms is an empirical value, and each Tick of about 17 ms is imperceptible to the user experience.

In our actual work, the list data is often obtained asynchronously, so when we initialize better-scroll, the code `item`import BScroll from 'better-scroll' export default {data () {return {data: []}} is required after the data acquisition. Created () {requestData () .then ((res) = > {this.data = res.data this.$nextTick (()) = > {this.scroll = new Bscroll (this.$refs.wrapper, {})}}

Axios or vue-resource. After we get the data, we need to initialize better-scroll asynchronously because Vue is data-driven. Vue data changes this.data = res.data to page re-rendering is an asynchronous process. Our initialization time is after DOM re-rendering, so it is possible to replace this.$nextTick here with setTimeout (fn, 20).

Data change-> DOM re-rendering is still an asynchronous process, so initialize better-scroll asynchronously even after we get the data.

In our actual development, in addition to asynchronous data acquisition, there are also some scenarios that can dynamically update the data in the list, such as common drop-down, load, pull-up and refresh, and so on. For example, we use better-scroll with Vue to implement the drop-down loading function code as follows: `item` import BScroll from 'better-scroll' export default {data () {return {data: []}}, created () {this.loadData ()} Methods: {loadData () {requestData () .then ((res) = > {this.data = res.data.concat (this.data) this.$nextTick () = > {if (! this.scroll) {this.scroll = new Bscroll (this.$refs.wrapper, {}) this.scroll.on ('touchend') (pos) = > {/ / drop-down action if (pos.y > 50) {this.loadData ()}})} else {this.scroll.refresh ()}})}

This code is a little more complicated than before, when we release the finger in the sliding list, better-scroll will send a touchend event, we listen to the event and determine that pos.y > 50, we define this behavior as a drop-down action. If it is a drop-down, we will re-request the data and concat the new data with the previous data, which will update the list data, and the data changes will be mapped to the DOM changes. One thing to note here we have judged that if this.scroll is not initialized, we will initialize it through new BScroll and bind some events or we will call the this.scroll.refresh method to recalculate to ensure that the scrolling effect is normal.

The abstraction and encapsulation of scroll components so we have a strong need to abstract a scroll component similar to Mini Program scroll-view component to facilitate developers to use.

When import BScroll from 'better-scroll' export default {props: {/ * 1 scrolls, a scroll event is sent to intercept the stream. * 2 Real-time dispatch of scroll events while scrolling will not block the stream. * 3 in addition to real-time dispatching scroll events, real-time scroll events can still be dispatched in real time in the case of swipe * / probeType: {type: Number, default: 1}, / * Click on the list whether to dispatch click events * / click: {type: Boolean, default:true}, / * whether horizontal scrolling is enabled * / scrollX: {type: Boolean, default: false} / * whether to dispatch scrolling events * / listenScroll: {type:Boolean, default: false}, / * list data * / data: {type: Array, default: null}, / * whether scrolling to the bottom of the event is sent for pull-up loading * / pullup: {type:Boolean, default: false} / * whether to dispatch top drop-down events for drop-down refresh * / pulldown: {type:Boolean, default: false}, / * whether to send events started by list scrolling * / beforeScroll: {type:Boolean, default: false}, / * refresh scroll delay when the data is updated. * / refreshDelay: {type: Number, default: 20}}, mounted () {/ / guarantee initialization of better-scroll setTimeout (() = > {this._initScroll ()}, 20)}, methods: {_ initScroll () {if (! this.$refs.wrapper) {return} / / better-scroll initialization this.scroll = new BScroll (this.$refs.wrapper, {probeType: this.probeType, click: this.click ScrollX: this.scrollX}) / / whether to dispatch scrolling event if (this.listenScroll) {let me = this this.scroll.on ('scroll', (pos) = > {me.$emit (' scroll', pos)})} / / whether to dispatch scrolling to the bottom event to pull up and load if (this.pullup) {this.scroll.on ('scrollEnd') () = > {/ / scroll to the bottom if (this.scroll.y {/ / drop-down action if (pos.y > 50) {this.$emit ('pulldown')})} / / whether to dispatch the event if (this.beforeScroll) {this.scroll.on (' beforeScrollStart', () = > {this.$emit ('beforeScroll')})} started by scrolling the list. Disable () {/ / proxy better-scroll 's disable method this.scroll & & this.scroll.disable ()}, enable () {/ / proxy better-scroll 's enable method this.scroll & & this.scroll.enable ()}, refresh () {/ / proxy better-scroll 's refresh method this.scroll & & this.scroll.refresh ()} ScrollTo () {/ / proxy better-scroll 's scrollTo method this.scroll & & this.scroll.scrollTo.apply (this.scroll, arguments)}, scrollToElement () {/ / proxy better-scroll 's scrollToElement method this.scroll & & this.scroll.scrollToElement.apply (this.scroll, arguments)}} Watch: {/ / after the change of listening data delays the refreshDelay time, call the refresh method to recalculate to ensure normal scrolling effect data () {setTimeout () = > {this.refresh ()}, this.refreshDelay)}

With this layer of encapsulation of the scroll component, let's modify the most complex code just now, assuming that we have registered the scroll component globally.

`item`import BScroll from 'better-scroll' export default {data () {return {data: [], pulldown: true}}, created () {this.loadData ()} Methods: {loadData () {requestData () .then ((res) = > {this.data = res.data.concat (this.data)})}

Some thoughts caused by plug-in Vue this article is not only to teach you to encapsulate a scroll component, but also to convey some of the thinking process of Vue the native JS of third-party plug-ins. Many students who study Vue.js may still stay at the level of "how to achieve XX effects with Vue.js". In fact, there are two key points to Vue plug-ins: one is to understand the implementation principle of the plug-in itself, and the other is to understand the features of Vue.js. Understanding the implementation principle of the plug-in itself requires a process of thinking and research, which may be difficult, but the harvest is also huge, while the understanding of the characteristics of Vue.js requires you to learn to accumulate and summarize from the usual projects. You should also be good at consulting the official documents of Vue.js to pay attention to some Vue.js upgrades, and so on.

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.