关于实现鼠标灵活滚动

2020-12-19 17:03:26 阅读：220 来源： 互联网

在做主页的页面时，想实现鼠标左键，即可上下滑动的过程。因此，通过观看博客与资料，发现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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

关于实现鼠标灵活滚动