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

关于实现鼠标灵活滚动

作者:互联网

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