码迷,mamicode.com
首页 > 其他好文 > 详细

better-scroll的使用

时间:2019-12-26 13:34:07      阅读:117      评论:0      收藏:0      [点我收藏+]

标签:pre   list   console   ann   隐藏   overflow   vue   加载完成   query   

首先下载better-scroll插件,地址:https://github.com/ustbhuangyi/better-scroll

(vue项目的话也可以通过npm install better-scroll --save安装)

引入bscroll.js

然后通过new BScroll调用

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrapper {
            height: 200px;
            background: red;
            overflow: hidden;
            font-size: 50px;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <ul class="content">
        <div class="btn">按钮</div>
        <!--<button class="btn">anniu</button>-->
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
        <li>分类列表</li>
    </ul>
</div>

</body>
<script src="bscroll.js"></script>
<script>
    // probeType: 0,1都是不侦测实时位置,2是在手指滚动的过程中监测,手指离开后的惯性滚动过程不监测,3是只要滚动,都监测
    let bscroll = new BScroll(.wrapper, {
        probeType: 3,
        click: true, //点击
        pullingUp: true //上拉加载更多
    })

    //监听滚动位置 默认情况下BScroll 是不可以监听滚动位置的,只有在初始化的时候设置了probeType才可以监听
    bscroll.on(scroll, function (position) {
        console.log(position)
    })

    bscroll.on(pullingUp, function () {
        console.log(上拉加载更多);
        //发送网络请求,请求更多页的数据

        //等请求完成,进行数据展示

        //调用finishiPullUp()表示本次上拉加载完成,可以进行下次上拉加载更多,不调用这个的话,默认只能由一次上拉加载更多
        setTimeout(function () {
            bscroll.finishPullUp()
        },2000)
    })
    //click事件
    document.querySelector(.btn).addEventListener(click, function () {
        console.log(>>>>>>>>>>>)
    })
</script>
</html>

 

把要滚动的内容放在wrapper里面包裹起来,要给最外层的div一个固定高度,设置超出部分隐藏,overflow: hidden;只有当内容超过了最外层div的高度时才会滚动,最长用的就是监听滚动位置,上拉加载更多,以及点击事件,特别需要注意的是,点击事件,BetterScroll 默认会阻止浏览器的原生 click 事件。当设置为 true,BetterScroll 会派发一个 click 事件,亲测当点击的元素是button时,并不会阻止点击事件,但是当点击的是div元素的时候,必须要设置click 为true,才能点击事件。

better-scroll的使用

标签:pre   list   console   ann   隐藏   overflow   vue   加载完成   query   

原文地址:https://www.cnblogs.com/lyt0207/p/12101423.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!