Vue better-scroll rolling plug-in traps, vuebetter-scroll

Vue better-scroll rolling plug-in traps, vuebetter-scroll

BetterScroll claims to be the best Mobile-side rolling plug-in currently, so its strength must exist. Or... haha. My personal feeling is still very useful. This article is not about BetterScroll in general, but about rolling. To learn more about it, please move here.

Rolling Principle

What is better-scroll?Rolling Principle

Better-scroll is a plug-in that focuses on mobile terminals (PCs already supported) in various rolling scenarios. The core of iscroll is the implementation of iscroll. Its API design is basically compatible with iscroll. On the basis of iscroll, some feature and performance optimization are extended.

Better-scroll is implemented based on native JS and does not rely on any framework. The size of the compiled code is 63kb, the compressed code is 35kb, And the gzip code is only 9kb. It is a very lightweight JS lib.

The green part is wrapper, that is, the parent container, which has a fixed height. The yellow part is content, which is the first child element of the parent container. Its height will increase with the size of the content. When the content height does not exceed the height of the parent container, it cannot be rolled. Once it exceeds the height of the parent container, We can scroll the content area. The principle of horizontal scrolling is to change the fixed height to the fixed width. (I won't be embarrassed here)

Vertical scroll

Let's talk about the Code directly.

<template> <div class="wrapper" ref="wrapper">   <ul>    <li v-for="item in 8">{{item}}</li>   </ul> </div></template><script> import BScroll from 'better-scroll';  export default {   mounted() {    this.$nextTick(() => {     this.scroll = new BScroll(this.$refs.wrapper);    });   }  };</script><style type="text/css"> .wrapper{  overflow:hidden;  height:100vh; } ul li{  height:400px; }</style>

This is a Vue BetterScroll vertical rolling demo. note two points here.

1. There can be only one parent div, that is, a container
2. The parent div must be set to overflow hidden with a fixed height.

Horizontal scrolling

Compared with vertical scrolling, You need to dynamically obtain the width of the scroll area and directly upload the code.

<Template> <div class = "tab" ref = "tab"> <ul class = "tab_content" ref = "tabWrapper"> <li class = "tab_item" v-for = "item in itemList" ref = "tabitem"> {item. title }}</li> </ul> </div> </template> <script> import BScroll from 'Better-scroll'; export default {data () {return {itemList: [{'title': 'followed '}, {'title': 'recommend'}, {'title': 'shenzhen '}, {'title': 'video'}, {'title': 'music'}, {'title': 'hot spot '}, {'title': 'New age '}, {'Title': 'enter'}, {'title': 'toutiao'}, {'title': 'Question answering'}, {'title ': 'image'}, {'title': 'tech'}, {'title': 'Sports '}, {'title': 'cai'}, {'title ': 'Military '},{ 'title': 'International'}] }}, created () {this. $ nextTick () => {this. initTabScroll () ;}) ;}, methods: {InitTabScroll () {let width = 0 for (let I = 0; I <this. itemList. length; I ++) {width + = this. $ refs. tabitem [0]. getBoundingClientRect (). width; // getBoundingCl IentRect () returns the size of the element and its position relative to the viewport} this. $ refs. tabWrapper. style. width = width + 'px 'this. $ nextTick () =>{ if (! This. scroll) {this. scroll = new BScroll (this. $ refs. tab, {startX: 0, click: true, scrollX: true, scrollY: false, eventPassthrough: 'vertical '});} else {this. scroll. refresh () }}) ;}};</script> <style lang = "scss" scoped>. tab {width: 100vw; overflow: hidden; padding: 5px ;. tab_content {line-height: 2rem; display: flex ;. tab_item {flex: 0 0 60px; width: 60px ;}}</style>

Pay attention to horizontal scrolling.

1. There can be only one parent div, that is, a container
2. Parent container needs to set overflow hiding and fixed width
3. Dynamically Retrieve the scroll area width

Because of the needs of recent projects, I have read a lot of information online and cannot solve my problem. The BetterScroll official website does not provide the actual demo reference, so I wrote this article using the rest time. I hope it will be useful to you. Please move on to the demo. Don't forget to give a star. It's not easy to write articles. Give a thumbs up!

Tips: The above code can be used directly. After installing the dependency, you can directly copy and test the code ~

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.