初识better-scroll:

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.     <title>Document</title>
    8.     <style>
    9.         body{
    10.             margin: 0;
    11.         }
    12.         body,html{
    13.             height: 100%;
    14.         }
    15.         ul,ol{
    16.             list-style: none;
    17.             padding: 0;
    18.             margin: 0;
    19.         }
    20.         .con{
    21.             width: 100vw;
    22.             height: 100vh;
    23.             /* 外框一定要设置高度 如果不设置 将没有效果 */
    24.             /* background: green; */
    25.             overflow: hidden;
    26.         } 
    27.         /* 横向滑屏 */
    28.         ul {
    29.            /* width: 150vw; */
    30.         }
    31.         ul>li{
    32.             width: 100%;
    33.             height: 40px;
    34.             line-height: 40px;
    35.             text-indent: 20px;
    36.             border-bottom: 1px solid #666666;
    37.             color: #333333;
    38.         }
    39.     </style>
    40. </head>
    41. <body>
    42.     <div class="con">
    43.         <ul class="list">
    45.         </ul>
    46.     </div>
    47. </body>
    48. <script type="text/javascript" src="https://unpkg.com/better-scroll@1.0.1/dist/bscroll.min.js"></script>
    49. <script>
    50.     function getData(){
    51.         var list = document.querySelector('.list');
    52.         var html = '';
    53.         for(var i=0;i<30;i++){
    54.             html += '<li>我是第' + (i+1) + '个li</li>' ;
    55.         }
    57.         list.innerHTML = html;
    58.     }
    59.     window.onload = function(){
    60.         getData();
    61.         con();
    62.     }
    64.     function con(){
    65.         var con = document.querySelector('.con');
    66.         var bscroll = new BScroll(con, {
    67.             scrollX: false,
    68.             scrollY: true,
    69.             momentum: true
    70.         });
    71.     }
    73. </script>
    74. </html>

    轮播图：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.     <title>Document</title>
    8.     <style>
    9.         body{
    10.             margin: 0;
    11.         }
    12.         body,html{
    13.             height: 100%;
    14.         }
    15.         ul{
    16.             list-style: none;
    17.             margin: 0;
    18.             padding: 0;
    19.         }
    20.         .con{
    21.             width: 100vw;
    22.             /* height: 100vh; */
    23.             overflow: hidden;
    24.             position: relative;
    25.         } 
    27.         .list{
    28.             width: 400vw;
    29.             overflow: hidden;
    30.             position: relative;
    31.         }
    32.         .list li{
    33.             width: 100vw;
    34.             height: 200px;
    35.             float: left;
    36.             text-align: center;
    37.             box-sizing: border-box;
    38.             font:24px/200px "微软雅黑";
    39.             background: chocolate;
    40.             color: white;
    41.             /* border:1px solid green; */
    42.         }
    43.         .nav{
    44.             position: absolute;
    45.             bottom: 10px;
    46.             left: 0;
    47.             width: 100vw;
    48.             text-align: center;
    49.         }
    50.         .nav a{
    51.             display: inline-block;
    52.             width: 12px;
    53.             height: 12px;
    54.             line-height: 12px;
    55.             background: white;
    56.         }
    57.         .nav a.active{
    58.             background: orange;
    59.         }
    60.     </style>
    61. </head>
    62. <body>
    63.         <div class="con">
    64.             <ul class="list">
    65.                 <li>我是li1</li>
    66.                 <li>我是li2</li>
    67.                 <li>我是li3</li>
    68.                 <li>我是li4</li>
    69.             </ul>
    70.             <nav class="nav">
    71.                 <a class="active"></a>
    72.                 <a></a>
    73.                 <a></a>
    74.                 <a></a>
    75.             </nav>
    76.             <!-- 布局后如何切换点 -->
    77.         </div>
    78.         <script type="text/javascript" src="https://unpkg.com/better-scroll@1.0.1/dist/bscroll.min.js"></script>
    79.         <script>
    80.             window.onload = ()=>{
    81.                 var con = document.querySelector(".con");
    82.                 var list = document.querySelector(".list");
    83.                 var navs = document.querySelectorAll(".nav a");
    85.                 var bscroll = new BScroll(con, {
    86.                     scrollX: true,
    87.                     scrollY: false,
    88.                     momentum: false,
    89.                     snap:{
    90.                         // 滑动的距离为屏幕的本分之及之后，换下一张
    91.                         threshold: 0.2
    92.                         // loop: true
    93.                     }
    94.                 });
    95.                 bscroll.on('scrollEnd', (e)=>{
    96.                     // DOM刷新不及时的情况
    97.                     bscroll.refresh();
    98.                     console.log(bscroll.getCurrentPage());
    99.                     var index = bscroll.getCurrentPage().pageX;
    101.                     navs.forEach((nav) => {
    102.                         nav.classList.remove("active");
    103.                     });
    104.                     navs[index].classList.add('active');
    105.                 });
    108.             };
    110.         </script>
    111. </body>
    112. </html>

    上滑加载：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    6.     <title>Document</title>
    7.     <style>
    8.     </style>
    9.     <style>
    10.         body{
    11.             margin: 0;
    12.         }
    13.         body,html{
    14.             height: 100%;
    15.         }
    16.         ul,ol{
    17.             list-style: none;
    18.             padding: 0;
    19.             margin: 0;
    20.         }
    22.         .con{
    23.             width: 100vw;
    24.             height: 100vh;
    25.             overflow: hidden;
    26.         } 
    27.         /* 横向滑屏 */
    28.         ul{
    29.             /* width: 150vw; */
    30.             position: relative;
    31.         }
    32.         ul>li{
    33.             width: 100%;
    34.             height: 40px;
    35.             line-height: 40px;
    36.             text-indent: 20px;
    37.             border-bottom: 1px solid #666666;
    38.             color: #333333;
    39.         }
    40.     </style>
    41. </head>
    42. <body>
    43.     <div class="con">
    44.         <ul class="list">
    46.         </ul>
    47.     </div>
    48. </body>
    49. <script type="text/javascript" src="./bscroll.js"></script>
    50. <script>
    51.     var list = document.querySelector(".list");
    52.     //数据加载
    53.     function getData(){
    54.         var html = "";
    55.         for(var i = 0; i < 20; i++){
    56.             html += "<li>我是第"+(i+1)+"个li</li>"
    57.         }
    58.         list.innerHTML = html;
    59.     }
    61.     //数据加载 
    62.     function getNewData(type){
    63.         var html = "";
    64.         for(var i = 0; i < 10; i++){
    65.             html += "<li>我是新加载第"+(i+1)+"个li</li>"
    66.         }
    67.         if(type === "up"){
    68.             list.innerHTML += html;
    69.         }else{
    70.             list.innerHTML = html + list.innerHTML;
    71.         }
    72.     }
    74.     window.onload = () =>{
    75.         getData();
    76.         intCon();
    77.     }
    79.     function intCon(){
    80.         var con = document.querySelector(".con");
    81.         var bscroll = new BScroll(con, {
    82.             scrollX: false,
    83.             scrollY: true,
    84.             momentum: true,
    85.             //上划加载
    86.             pullUpLoad:{
    87.                 // 底部还剩50px的时候，进行这个操作
    88.                 threshold: 50
    89.             },
    90.             pullDownRefresh:{
    91.                 threshold: -50,
    92.                 stop: 30
    93.             }
    94.         });
    95.         bscroll.on('pullingUp', ()=>{
    96.             setTimeout(()=>{
    97.                 getNewData('up');
    98.                 bscroll.finishPullUp();
    99.                 bscroll.refresh();
    100.             }, 1000);
    101.         });
    102.         bscroll.on('pullingDown', ()=>{
    103.             console.log(222);
    104.             setTimeout(()=>{
    105.                 getNewData('down');
    106.                 //下来动作结束
    107.                 bscroll.finishPullDown();
    108.                 bscroll.refresh();
    109.             }, 1000);
    110.         });
    111.     }
    112. </script>
    113. </html>

    城市列表示例：

    1. (function(){
    2.     function $getClass(classes){
    3.         return document.querySelector(classes);
    4.     }
    6.     // 获取容器
    7.     var list = $getClass('.list-wrapper');
    8.     // 右侧导航
    9.     var indexListNav = $getClass('.index-list-nav');
    10.     // 导航ul下所有的li
    11.     var indexListNavs = indexListNav.querySelectorAll('li');
    12.     // 顶部索引
    13.     var indexListfixed = $getClass('.index-list-fixed');
    15.     var indexListContent = $getClass('.index-list-content');
    16.     // 内容ul下所有的li
    17.     var indexLists = indexListContent.children[1].children;
    19.     var indexList = new BScroll(list,{
    20.         // 事件派发
    21.         probeType:3
    22.     });
    24.     indexList.on('scroll',(e)=>{
    25.         var y= -e.y;
    26.         // 排除定位城市，未超过第一项就不显示顶部
    27.         if (y < indexLists[0].offsetTop){
    28.             setNav(0);
    29.             indexListfixed.style.display = 'none';
    30.             return;
    31.         }
    33.         // 过了第一项，显示它
    34.         indexListfixed.style.display = 'block';
    36.         for(var i=0; i < indexLists.length-1; i++){
    37.             // 滚动距离是否大于当前项，并且小于下一项，如果是，则说明是这项
    38.             if (y >= indexLists[i].offsetTop && y < indexLists[i+1].offsetTop) {
    39.                 setNav(i);
    41.                 indexListfixed.innerHTML= indexLists[i].children[0].innerHTML;
    42.                 return;
    43.             }
    44.         }
    46.         //最后一项不满足i+1的条件
    47.         setNav(indexLists.length-1);
    48.         indexListfixed.innerHTML= indexLists[indexLists.length-1].children[0].innerHTML;
    49.     });
    50.     indexListNav.addEventListener('touchstart',(e)=>{
    51.         setIndex(e.changedTouches[0].clientY);
    52.     });
    53.     indexListNav.addEventListener('touchmove',(e)=>{
    54.         setIndex(e.changedTouches[0].clientY);
    55.     });
    57.     // 设置坐标
    58.     function setIndex(y){
    59.         let index = getIndex(y);
    60.         if (index < 0 || index > 8){
    61.             return;
    62.         }
    63.         // scrollToElement 为插件自带的API，滚动到哪里（那个元素）
    64.         indexList.scrollToElement(indexLists[index],1000);
    65.         // 加上样式
    66.         setNav(index);
    67.     }
    69.     //获取坐标
    70.     function getIndex(y){
    71.         var navTop = indexListNav.getBoundingClientRect().top;
    72.         // li的高度
    73.         var h = 18;
    74.         var index = parseInt((y - navTop)/18);
    76.         return index;
    77.     }
    79.     // li active
    80.     function setNav(index){
    81.         indexListNavs.forEach((li) => {
    82.             li.classList.remove('active');
    83.         });
    84.         indexListNavs[index].classList.add('active');
    85.     }
    87. })(window);
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.     <title>城市列表</title>
    8.     <style type="text/css">
    9.         ul {
    10.             margin: 0;
    11.             padding: 0;
    12.             list-style: none;
    13.         }
    14.         .list-wrapper{
    15.             position: absolute;
    16.             left: 0;
    17.             top: 0;
    18.             right: 0;
    19.             bottom: 0;
    20.             overflow: hidden;
    21.             background: #fff;
    22.         } 
    23.         .index-list-content{
    24.             background: #fff;
    25.             border-radius: 2px;
    26.         }
    28.         .index-list-title{
    29.             padding: 14px 16px;
    30.             font-size: 14px;
    31.             line-height: 1.6;
    32.             color: #333;    
    33.         }
    35.         .index-list-anchor{
    36.             padding: 16px 16px 10px 16px;
    37.             line-height: 1;
    38.             font-size: 14px;
    39.             color: #999;
    40.             background: #f7f7f7;    
    41.         }
    43.         .index-list-item {
    44.             position: relative;
    45.             height: 50px;
    46.             line-height: 50px;
    47.             padding: 0 16px;
    48.             font-size: 14px;
    49.             color: #333;
    50.         }
    51.         .index-list-item:last-child{
    52.             border: none;
    53.         }
    54.         .index-list-item_active{
    55.             background: #ddd;    
    56.         }
    57.         .index-list-fixed{
    58.             position: absolute;
    59.             z-index: 1;
    60.             top: 0;
    61.             left: 0;
    62.             width: 100%;
    63.             padding: 16px 16px 10px 16px;
    64.             box-sizing: border-box;
    65.             font-size: 14px;
    66.             line-height: 1;
    67.             color: #999;
    68.             background: #f7f7f7;    
    69.         }
    71.         .index-list-nav {
    72.             position: absolute;
    73.             z-index: 30;
    74.             right: 0;
    75.             top: 50%;
    76.             transform: translateY(-50%);
    77.             font-family: Helvetica;    
    78.         }
    79.         .index-list-nav ul {
    80.             padding: 0;
    81.             margin: 0;
    82.         }       
    83.         .index-list-nav li{
    84.             padding: 6px 16px 0 16px;
    85.             line-height: 1;
    86.             text-align: center;
    87.             box-sizing: border-box;
    88.             font-size: 12px;
    89.             color: gray;
    90.         }          
    91.         .index-list-nav .active {
    92.             color: blue;
    93.         }
    95.     </style>
    96. </head>
    97. <body>
    98.     <div class="list-wrapper">
    99.         <div class="scroll-content">
    100.             <div class="index-list-content">
    101.                 <div class="index-list-title">
    102.                     定位城市: 
    103.                 </div>
    104.                 <ul>
    105.                     <li>
    106.                         <h2 class="index-list-anchor">
    107.                             ★热门城市
    108.                         </h2>
    109.                         <ul>
    110.                             <li class="index-list-item border-bottom-1px">
    111.                                 北京市
    112.                             </li>
    113.                             <li class="index-list-item border-bottom-1px">
    114.                                 上海市
    115.                             </li>
    116.                         </ul>
    117.                     </li>
    118.                     <li>
    119.                         <h2 class="index-list-anchor">
    120.                             A
    121.                         </h2>
    122.                         <ul>
    123.                             <li class="index-list-item border-bottom-1px">
    124.                                 鞍山市
    125.                             </li>
    126.                             <li class="index-list-item border-bottom-1px">
    127.                                 安庆市
    128.                             </li>
    129.                         </ul>
    130.                     </li>
    131.                     <li>
    132.                         <h2 class="index-list-anchor">
    133.                             B
    134.                         </h2>
    135.                         <ul>
    136.                             <li class="index-list-item border-bottom-1px">
    138.                                 北京市
    139.                             </li>
    140.                             <li class="index-list-item border-bottom-1px">
    141.                                 巴音郭楞州
    142.                             </li>
    143.                             <li class="index-list-item border-bottom-1px">
    144.                                 博尔塔拉州
    145.                             </li>
    146.                         </ul>
    147.                     </li>
    148.                     <li>
    149.                         <h2 class="index-list-anchor">
    150.                             C
    151.                         </h2>
    152.                         <ul>
    153.                             <li class="index-list-item border-bottom-1px">
    154.                                 成都市
    155.                             </li>
    156.                         </ul>
    157.                     </li>
    158.                     <li>
    159.                         <h2 class="index-list-anchor">
    160.                             E
    161.                         </h2>
    162.                         <ul>
    163.                             <li class="index-list-item border-bottom-1px">
    164.                                 鄂尔多斯市
    165.                             </li>
    166.                             <li class="index-list-item border-bottom-1px">
    167.                                 鄂州市
    168.                             </li>
    169.                             <li class="index-list-item border-bottom-1px">
    170.                                 恩施州
    171.                             </li>
    172.                         </ul>
    173.                     </li>
    174.                     <li>
    175.                         <h2 class="index-list-anchor">
    176.                             F
    177.                         </h2>
    178.                         <ul>
    179.                             <li class="index-list-item border-bottom-1px">
    180.                                 福州市
    181.                             </li>
    182.                             <li class="index-list-item border-bottom-1px">
    183.                                 佛山市
    184.                             </li>
    185.                             <li class="index-list-item border-bottom-1px">
    186.                                 防城港市
    187.                             </li>
    188.                         </ul>
    189.                     </li>
    190.                     <li>
    191.                         <h2 class="index-list-anchor">
    192.                             G
    193.                         </h2>
    194.                         <ul>
    195.                             <li class="index-list-item border-bottom-1px">
    196.                                 广州市
    197.                             </li>
    198.                             <li class="index-list-item border-bottom-1px">
    199.                                 贵阳市
    200.                             </li>
    201.                         </ul>
    202.                     </li>
    203.                     <li>
    204.                         <h2 class="index-list-anchor">
    205.                             H
    206.                         </h2>
    207.                         <ul>
    208.                             <li class="index-list-item border-bottom-1px">
    209.                                 杭州市
    210.                             </li>
    211.                             <li class="index-list-item border-bottom-1px">
    212.                                 和田地区
    213.                             </li>
    214.                         </ul>
    215.                     </li>
    216.                     <li>
    217.                         <h2 class="index-list-anchor">
    218.                             Z
    219.                         </h2>
    220.                         <ul>
    221.                             <li class="index-list-item border-bottom-1px">
    222.                                 郑州市
    223.                             </li>
    224.                             <li class="index-list-item border-bottom-1px">
    225.                                 张家口市
    226.                             </li>
    227.                             <li class="index-list-item border-bottom-1px">
    228.                                 张家界市
    229.                             </li>
    230.                             <li class="index-list-item border-bottom-1px">
    231.                                 珠海市
    232.                             </li>
    233.                             <li class="index-list-item border-bottom-1px">
    234.                                 中山市
    235.                             </li>
    236.                             <li class="index-list-item border-bottom-1px">
    237.                                 自贡市
    238.                             </li>
    239.                             <li class="index-list-item border-bottom-1px">
    240.                                 资阳市
    241.                             </li>
    242.                             <li class="index-list-item border-bottom-1px">
    243.                                 枣庄市
    244.                             </li>
    245.                             <li class="index-list-item border-bottom-1px">
    246.                                 舟山
    247.                             </li>
    248.                             <li class="index-list-item border-bottom-1px">
    249.                                 遵义市
    250.                             </li>
    251.                             <li class="index-list-item border-bottom-1px">
    252.                                 淄博市
    253.                             </li>
    254.                             <li class="index-list-item border-bottom-1px">
    255.                                 株洲市
    256.                             </li>
    257.                             <li class="index-list-item border-bottom-1px">
    258.                                 中卫市
    259.                             </li>
    260.                         </ul>
    261.                     </li>
    262.                 </ul>
    263.             </div>
    264.         </div>
    265.     </div>
    266.     <div class="index-list-nav">
    267.         <ul>
    268.             <li data-index="0" class="active">
    269.                 ★
    270.             </li>
    271.             <li data-index="1">
    272.                 A
    273.             </li>
    274.             <li data-index="2" class="">
    275.                 B
    276.             </li>
    277.             <li data-index="3" class="">
    278.                 C
    279.             </li>
    280.             <li data-index="4" class="">
    281.                 E
    282.             </li>
    283.             <li data-index="5" class="">
    284.                 F
    285.             </li>
    286.             <li data-index="6" class="">
    287.                 G
    288.             </li>
    289.             <li data-index="7" class="">
    290.                 H
    291.             </li>
    292.             <li data-index="8" class="">
    293.                 Z
    294.             </li>
    295.         </ul>
    296.     </div>
    297.     <div class="index-list-fixed" style="display: none;">
    298.         A
    299.     </div>
    300.     <script type="text/javascript" src="./bscroll.js"></script>    
    301.     <script type="text/javascript" src="./city.js"></script>
    302. </body>
    303. </html>