当前位置：文江博客话题详情

CSS HTML Vue.js script

better-scroll 在不使用Vue 的情况下，怎么玩？

发布于 2022-09-06 06:07:08 字数 64 浏览 17 评论 0

我想在移动端使用better-scroll ，但是我又不想使用Vue，网上的例子都是和Vue结合使用的，求大神指点

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（3）

手心的温暖 2022-09-13 06:07:08

直接引入dist/bscroll.min.js，
给你个例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
        <link rel="stylesheet" type="text/css" href="../css/normalize.css"/>
        <link rel="stylesheet" type="text/css" href="../font-awesome-4.7.0/css/font-awesome.css"/>
        <style>
            html,body{
                height: 100%;
            }
            #app{
                display: flex;
                flex-direction: column;
                height: 100%;
            }
            header{
                height: 40px;
                line-height: 40px;
                background-color: #DDD;
            }
            main{
                flex: 1;
                display: block;
                position: relative;
                overflow: hidden;
            }
            ul{
                list-style: none;
                margin: 0;
                padding: 0;
                
                position: initial;
            }
            footer{
                height: 40px;
                line-height: 40px;
                background-color: #DDD;
            }
            li{
                height: 100px;
                border-bottom: 1px solid #DDD;
            }
            .boxconter{
                text-align: center;
                padding: 10px 0;
                height: 50px;
            }
            .boxconter p{
                margin-top: 10px;
                margin-bottom: 0;
            }
            .div{
                height: 100%;
                width: 100%;                
            }
            .boxconter:last-child{
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <header>
                我是header
            </header>
            <main>            
                <div class="div">
                        <ul>
                                    
                                <li class="boxconter">加载更多</li>
                                <li class="boxconter">
                                    <span class="fa fa-spinner fa-pulse"></span>
                                    <p>加载中</p>
                                </li>             
                            </ul>
                </div>
            </main>
            <footer>
                我是footer
            </footer>
        </div>
        <script src="dist/bscroll.min.js"></script>
        <script>
            var div = document.getElementsByClassName('div')[0];
            var ul = document.querySelector('.div ul');
            var more = document.querySelectorAll('.div .boxconter');
            var lis = 10;
            for(var i=0;i<lis;i++){            
                var li = document.createElement('li');
                var li_text = document.createTextNode(i);
                li.appendChild(li_text);
                ul.insertBefore(li,more[0]);
            }
            var meunScroll1 = new BScroll(div, {
                    click: true,
                    scrollY: true,                        
                      pullUpLoad:{                //做加载更多时用
                          threshold: -70, // 当上拉到超过顶部 70px 时，                    
                      }
              });
         meunScroll1.on("pullingUp",function(){     //做加载更多时用
                   more[0].style.display="none";
                   more[1].style.display="block";
                   setTimeout(function(){
                       for(var i=0;i<lis;i++){            
                    var li = document.createElement('li');
                    var li_text = document.createTextNode(i);
                    li.appendChild(li_text);
                    ul.insertBefore(li,more[0]);            
                }
                           more[1].style.display="none";
                           more[0].style.display="block";
                           meunScroll1.finishPullUp();                                    
                        meunScroll1.refresh();
                   },1000);
                           
       }); 
        </script>
    </body>
</html>

海夕 2022-09-13 06:07:08

better—scroll是滴滴(?)前端大牛根据iscroll为更贴合vue所升级的,那些方法你该怎么用就怎么用呗

梦冥 2022-09-13 06:07:08

他就是js文件，简单说你下载下来了你直接引入，然后就使用。。。

~没有更多了~

关于作者

泪是无色的血

暂无简介

0 文章

0 评论

24 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

已经忘了多久

文章 0 评论 0

15867725375

文章 0 评论 0

LonelySnow

文章 0 评论 0

走过海棠暮

文章 0 评论 0

轻许诺言

文章 0 评论 0

信馬由缰

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文