首页 > 其他分享> > 关于实现鼠标灵活滚动

关于实现鼠标灵活滚动

2020-12-19 17:03:26 作者：互联网

在做主页的页面时，想实现鼠标左键，即可上下滑动的过程。因此，通过观看博客与资料，发现better-scroll是一个非常好用的插件。接下来，记录下做此功能的时候，实现到的一些学习。

BetterScroll 是一款重点解决移动端各种滚动场景需求的开源插件（可以在GitHub上找到其资源），适用于滚动列表、选择器、轮播图、索引列表、开屏引导等应用场景。

首先的话，先输入npm install better-scroll --save来进行安装，因为版本需要稳定的原因，我没有选择最新版。而是在下载安装完成之后，手动在package,json中，将版本改为了1.13.2，之后在输入npm install，全局安装下即可。

接下来，我先拿了一个html文件作为实验，在node_modules文件夹中，找到了bscroll.js文件，将它复制到了一个新的文件夹中，在html文件中，通过：<script src="./bscroll.js"></script>，而引入。

接下来，我们来做真正的实现。

其常见的，html结构为：

<div class="wrapper"> 
　　<ul class="content"> 
　　　　<li>...</li> 
　　　　<li>...</li>
　　　　... 
　　</ul> 
</div>

需要记住，这个类为wrapper的父元素中，智能包含一个元素，而这个元素中允许包含许多个子元素。接下来，是我初次学习这个插件的时候，学习的写的一些代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .content{
            height: 150px;
            background-color: #bfbf0d;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div>
    <div class="content">
<!--       content 里面只能包含一个元素-->
        <ul>
            <button class="btn">按钮1</button>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>

        </ul>
    </div>
</div>
<script src="./bscroll.js"></script>
<script>
    //默认情况下，BScroll是不可以实时监听滚动位置，probe侦测，0、1都不侦测
    //2的话，手指滚动的过程中是侦测的，但是手指离开后惯性滚动的内容是不侦测的。
    //3的话，是指只要滚动过程当中，那么都会侦测。
const bscroll = new BScroll(document.querySelector(".content"),{
    probeType: 3,
    click:true,
    pullUpLoad:true
})

bscroll.on("scroll",(position) =>{
    // console.log(position);

})
    bscroll.on("pullingUp",()=>{
       console.log("上拉加载更多")
        //发送网络请求，请求更多页的数据
        //等待数据请求完成，并且将新的数据显示出来后
        setTimeout(()=>{
            bscroll.finishPullUp()
        },2000)
    })
    document.querySelector(".btn").addEventListener("click",function (){
        console.log("------")
    })
</script>
</body>
</html>

我们来归纳比较重要的几个重要的points。

索引列表，首先需要在滚动过程中实时监听滚动到哪个索引的区域了，来更新当前索引。在这种场景下，我们可以使用probeType选项。当probeType设置为0、1时，那么都不会侦测。当probeType设置为2时，手指滚动的时候，都是侦测的。但是，手指离开后，即使是通过惯性所滚动的数据，都不会被侦听。当此选项设置为 3 时，会在整个滚动过程中实时派发 scroll 事件。从而获取滚动过程中的位置。pullUpLoad选项，用来配置上拉加载功能。当设置为 true 或者是一个 Object 的时候，可以开启上拉加载，可以配置离底部距离阈值（threshold）来决定开始加载的时机。注意，如上述代码所显示，若仅仅是在bscroll中使用pullIUpLoad选项，且使用bscroll.on（“pullingUp”，（）=>{console.log(“上拉加载更多”})，无论拉多少次，但只能显示一次。因此，为了可以显示多次，且延期段时间，我在后面设置了setTimeout函数，这样即可实现显示多次了。click设置为true，也是十分重要的，后期做项目的时候即有显示。

setTimeout(()=>{
            bscroll.finishPullUp()
        },2000)
    })

接下来，我们来看下项目当中的实际应用。最初我知道的实现滚动，只有在css中直接设置，overflow：scroll。在移动端，如果仅使用，overflow：scroll生成一个滚动容器，会发现它的滚动是比较卡顿，呆滞的。因为，我们早就习惯了目前主流操作系统与浏览器视窗的滚动体验，比如滚动到边缘即会有回弹，手指停止滑动，还会按惯性继续滚动一会，手指快速滑动时页面会快速滚动。而原生的却没有，会有一定的卡顿感。我的应用，主要是在首页中，实现鼠标左键直接可拖动滑滚。为了之后，这个功能可以实现在不同的页面，因此我在component文件见中的common文件夹中，添加了一个scroll文件。且在其中创建了一个scroll.vue，代码如下：

<template>
<div class="wrapper" ref="wrapper">
 <div class="content">
   <slot></slot>
 </div>
</div>
</template>
<!--//ref如果是绑定在组件中的，那么通过this.$refs.refname获取到的是一个组件对象-->
<!--//ref如果绑定在普通元素中，那么会通过this.$refs.refname获取的一个元素对象-->
<script>
import BScroll from "better-scroll"
export default {
  name: "scroll",
  data(){
    return{
      scroll:null
    }
  },
  mounted(){
this.scroll = new BScroll(this.$refs.wrapper,{
click:true
})
  }
}
</script>

<style scoped>

</style>

接下来做两点解释：

1.<template>模块，中为什么要使用，两层<div>来包裹住插槽。文中上述部分也看到了，better-scroll中的基本格式，就是wrapper类的父元素只包裹一个元素，而此元素里面则可以包含许多元素。（这里留下的<slot>，以home这页面而言的话，是为了能够灵活滚动几个组件的）。

2.之后在mounted中的时候，尽量不要使用document.querySelector('wrapper')，因为无法确定项目中，是否其他部分也有类名为wrapper的。因此，使用ref来针对性指定。ref被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的$refs对象进行注册。如果在普通的DOM元素上使用，引用信息就是元素。如果用在子组件上，引用信息就是组件实例。

接下来，来看下home.vue中的实现，这里只贴与此相关的代码。

<template>
  <div class="homie">
    <navbar class="home-nav"><div slot="center">购物街</div> </navbar>
<scroll class="content">
       <homeswiper :banners="banners"></homeswiper>
       <reco :recommends="recommends"></reco>
       <featureview></featureview>
       <tabcontrol :titles="['流行','新款','精选']"  class="tab-control" @tabclick="tabclick"> </tabcontrol>
       <goodslist :goods="showgoods"></goodslist>
</scroll>
    </div>
</template>
<script>
import scroll from "../../src/components/common/scroll/scroll";
export default {
  name: "home",
  components:{
    navbar,
    homeswiper,
    reco,
    featureview,
    tabcontrol,
    goodslist,
    scroll
  }

</script>

<style scoped>
.homie{
  color: black;
  padding-top: 44px;
  padding-bottom: 49px;
  position: relative;
  height: 100vh;
}

.content{
  height: calc(100vh - 89px);
  overflow-y: hidden;
}
</style>

首先，就是在home中注册这个组件，并使用。先是import了scroll，之后的话在<template>中使用了<scroll>，且其中包裹了需要滑动的组件们。

后面的content中不需要再使用ref的原因是因为，<style scoped>在vue文件中的style标签上。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped，相当于实现了样式的模块化。height使用了calc函数，因为我的tabbar与navbar的高度加在一起为89px。使用calc函数的时候，记住需要在符号左右有所空格。由于1vh就等于视口高度的百分之一，则我直接设置整体为100vh即可。我在做完上述步骤后，实现了可以灵活滚动，但是点击被<scroll>包裹的那些组件中的商品详情，图片，轮播图等等都无法跳转了。查阅了better-scroll后发现，需要在scroll.vue中，再添入click选择项，设置为true，即可实现了。

标签：滚动,鼠标,灵活,元素,组件,bscroll,侦测,scroll
来源： https://www.cnblogs.com/ljylearnsmore/p/14159945.html