Rumah > hujung hadapan web > tutorial js > vue better-scroll的滚动插件使用详解

vue better-scroll的滚动插件使用详解

php中世界最好的语言
Lepaskan: 2018-04-12 17:18:52
asal
4393 orang telah melayarinya

这次给大家带来vue better-scroll的滚动插件使用详解,使用vue better-scroll的滚动插件的注意事项有哪些,下面就是实战案例,一起来看一下。

BetterScroll号称目前最好用的移动端滚动插件,因此它的强大之处肯定是存在的。要不...哈哈。个人感觉还是很好用的。这篇文章不是笼统的讲 BetterScroll ,而是单讲滚动,想要深入了解它,请移步这里 。

滚动原理

better-scroll 是什么滚动原理

better-scroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现,它的 API 设计基本兼容 iscroll,在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化

better-scroll 是基于原生 JS 实现的,不依赖任何框架。它编译后的代码大小是 63kb,压缩后是 35kb,gzip 后仅有 9kb,是一款非常轻量的 JS lib。

绿色部分为 wrapper,也就是父容器,它会有固定的高度。黄色部分为 content,它是父容器的第一个子元素,它的高度会随着内容的大小而撑高。那么,当 content 的高度不超过父容器的高度,是不能滚动的,而它一旦超过了父容器的高度,我们就可以滚动内容区了。横向滚动的原理一致就是将固定高度改为固定宽度。(这里就不啰嗦了)

纵向滚动

废话不多说,我们直接上代码。

<template>
 <p class="wrapper" ref="wrapper">
   <ul>
    <li v-for="item in 8">{{item}}</li>
   </ul>
 </p>
</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>
Salin selepas log masuk

这是一个Vue BetterScroll纵向滚动demo,这里需要注意的有两点。

  1. 只能有一层父级p,也就是容器

  2. 父级p要设置溢出隐藏,并且固定高度

横向滚动

横向滚动,相比纵向滚动需要动态的去获取滚动区的宽度,直接上代码。

<template>
 <p 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>
 </p>
 </template>
 <script>
 import BScroll from 'better-scroll';
  export default {
   data() {
    return{
     itemList:[
     {
      'title':'关注'
     },
     {
      'title':'推荐'
     },
     {
      'title':'深圳'
     },
     {
      'title':'视频'
     },
     {
      'title':'音乐'
     },
     {
      'title':'热点'
     },
     {
      'title':'新时代'
     },
     {
      'title':'娱乐'
     },
     {
      'title':'头条号'
     },
     {
      'title':'问答'
     },
     {
      'title':'图片'
     },
     {
      'title':'科技'
     },
     {
      'title':'体育'
     },
     {
      'title':'财经'
     },
     {
      'title':'军事'
     },
     {
      'title':'国际'
     }
     ]
    }
   },
   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; //getBoundingClientRect() 返回元素的大小及其相对于视口的位置
     }
     this.$refs.tabWrapper.style.width=width+&#39;px&#39;
     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>
Salin selepas log masuk

横向滚动需要注意。

  1. 只能有一层父级p,也就是容器

  2. 父容器要设置溢出隐藏并固定宽度

  3. 动态获取滚动区的宽度

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

在vue中的全选与反选

使用mint-ui时间插件时怎么获取选择值

Atas ialah kandungan terperinci vue better-scroll的滚动插件使用详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan