BetterScroll应用

第一步： 安装

NPM

better-scroll 托管在 Npm 上，执行如下命令安装：

npm install better-scroll --save

接下来就可以在代码中引入了，webpack 等构建工具都支持从 node_modules 里引入代码：

import BScroll from 'better-scroll'

如果是 ES5 的语法，如下：

var BScroll = require('better-scroll')

script 加载

better-scroll 也支持直接用 script 加载的方式，加载后会在 window 上挂载一个 BScroll 的对象。

你可以直接用：https://unpkg.com/better-scroll/dist/bscroll.min.js 这个地址。也可以把 dist 目录下的文件拷贝出去发布到自己的 cdn 服务器。

鉴于有推荐的基于VUE的应用我就简单写写JQ的应用
推荐地址

横向

废话不多说直接上代码

1、html

    

            

                

                    
足球
                    
篮球
                    
排球

                    
足球
                    
篮球
                    
排球

                    
足球
                    
篮球
                    
排球
                
            
        

2、css

  .top{
           height:40px;
           background-color: bisque;
       }
       .wrapperX{
            width:100%;
            height:100%;
       }
       .contentX{
            white-space: nowrap;
            display: inline-block;
       }
       .contentX div{
            display: inline-block;
           margin: 5px 10px;
           width:60px;
           height:30px;
           line-height: 30px;
           font-size: 14px;
           color:#fff;
           text-align: center;
           background-color: coral;
           border-radius: 15px;
       }
3、js

  let scroll_X = new BScroll('.wrapperX',{
        scrollY: false, // 因为scrollY默认为true，其实可以省略
        scrollX: true
    })

纵向

1、html

    

                

                    

                        

                                
1
                                
2
                                
3
                                
1
                                
2
                                
3
                                
1
                                
2
                                
3
                                
1
                                
2
                                
3
                                
1
                                
2
                                
3
                        
                        

                    
                
        
2、css

      center{
            flex: 1;
            overflow: hidden;
       }
       .wrapper{
            width:100%;
            height:100%;
       }
       .content .list div{
           height:60px;
       }

3、js

  let scroll = new BScroll('.wrapper',{
        scrollY: true, // 因为scrollY默认为true，其实可以省略
        pullUpLoad:{
            threshold: 50
        },
        bounce:{
          top:false,
          bounce: true
        }
    })
    scroll.on('scrollEnd', ()=>{
        if (scroll.y <= scroll.maxScrollY + 50) {
            console.log("上拉")
            $("#loading").fadeIn();
            setTimeout( ()=>{
                $("#loading").fadeOut();
                $(".list").append("
加载
");
                scroll.refresh()
            }, 1000)
        }
    })