vue滚动条下拉翻页（Vue中利用better-scroll组件实现横向滚动功能）

vue滚动条下拉翻页

About

最近在学习vue的过程中，仿照去哪儿网的移动端写了个小项目，旨在实践和巩固基础知识，但是今天发现去哪儿的首页上有一个组件用户体验较差，即一个横向列表使用浏览器的原生滚动实现，列表滚动起来较为生涩，很难受，于是乎决定由better-scroll重写这个组件。

better-scroll介绍

better-scroll是黄轶大神（没错，我学长）写的基于i-scroll的一个滚动组件，项目地址：https://github.com/ustbhuangyi/better-scroll

一、滚动的实现原理

better-scroll的滚动原理和浏览器原生滚动原理是一样的，当子盒子的高度大于父盒子的高度，就会出现纵向滚动：

同理，如果子盒子的宽度大于父盒子的宽度，那么就会出现横向滚动 ( 根本原理 )。

二、在Vue中使用better-scroll

在Vue中使用better-scroll最需要注意的点就是必须等到页面渲染完成再去执行BScroll的实例化，因为better-scroll必须要得到滚动区域的尺寸和父盒子的尺寸，来计算出是否能滚动，所以我们必须要对Vue的生命周期有一定的了解。

这里是一个小demo，通过这个demo你将会了解到如何使用better-scroll

<template>
  <li class="wrapper" ref="wrapper"> // 在vue中获取dom元素最简便的方法就是利用 this.$refs
    <ul class="content">
      <li>...</li>
      <li>...</li>
      ...
    </ul>
  </li>
</template>
<script>
  import BScroll from 'better-scroll' //导入better-scroll
  export default {
    mounted() {
      this.$nextTick(() => { // 使用 this.$nextTick 为了确保组件已经渲染完毕
        this.scroll = new Bscroll(this.$refs.wrapper, {}) // 实例化BScroll接受两个参数，第一个为父盒子的dom节点
      })
    }
  }
</script>

三、在Vue中实现横向滚动

1. 效果图对比

使用原生滚动：

使用better-scroll:

2. 代码（请看注释）

<template>
  <li class="recommand-wrap">
    <li class="title">
      <img class="title-img" src="https://imgs.qunarzz.com/piao/fusion/1711/16/bfbb9874e8f11402.jpg" alt="vue滚动条下拉翻页（Vue中利用better-scroll组件实现横向滚动功能）" border="0" />

参考链接

作者：黄轶

链接：https://zhuanlan.zhihu.com/p/27407024

总结

到此这篇关于Vue中利用better-scroll组件实现横向滚动的文章就介绍到这了,更多相关Vue better-scroll横向滚动内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网！