'overflow: scroll'在iOS上滑动卡顿初体验

http://geek100.com/demo/os.html   （没事点一下）
在iOS系统的手机上浏览时，则会出现明显的卡顿现象;但是在android系统的手机上则不会出现该问题

解决方案: 百度到： -webkit-overflow-scrolling: touch; 一行css解决。

这行代码说是启用了硬件加速特性，所以滑动很流畅。
在WebKit 108400版本左右才支持，所以iOS Safari应该是需要5.0。Android则是在4.0以上支持。

实现无限加载/刷新 + 滑动特效; 方案：

   1. -webkit-overflow-scrolling: touch + mint-ui(loadMore);
   2.better-scroll
   3: iscroll

    <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill='false' ref="loadmore" :height ='wrap的高度'>
          <ul>
            <li v-for="item in list">{{ item }}</li>
          </ul>
    </mt-loadmore>
    <!--
        loadTop: 下拉满足伐值 触发事件
        loadBottom: 上拉满足伐值 触发事件
        bottom-all-loaded: 上拉满足伐值 是否触发事件
        auto-fill: 初始化时是否触发上拉事件
        注意：每次事件触发进行同步/异步操作完 要执行 this.$refs.loadmore.onBottomLoaded();或者
        this.$refs.loadmore.onTopLoaded(); （组件自己会进行一些重新定位的操作）
    -->

注意：如果上拉加载 content层（ul元素）dom高度没有变化，即不能触发上拉加载事件！

2.better-scroll 插件

其实文档都有介绍的（https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/#%E8%B5%B7%E6%AD%A5）
讲一下常用的api, 和里面的一些坑!

1.原理

    <div class="wrapper" :height='设置的高度'>
      <ul class="content">
        <li v-for='item in dataList'>...</li>
      </ul>
      <!-- 这里可以放一些其它的 DOM，但不会影响滚动 -->
    </div>
    <!--
        (wrapper层的高度/宽度) > (content层的高度/宽度)? 才能触发滑动 : 无效果;
    -->

一些常用配置 / 钩子和Events方法

let scroll = new BScroll('.wrapper',{
    swipeBounceTime: 1200,// swipe 回弹 时间
    deceleration: 0.001,// 滚动动量减速越大越快，建议不大于0.01
    momentumLimitTime: 300,// 符合惯性拖动的最大时间
    momentumLimitDistance: 15,// 符合惯性拖动的最小拖动距离
    resizePolling:60,//重新调整窗口大小时，重新计算better-scroll的时间间隔
    preventDefault: true,// 是否阻止默认事件
   
    <!--+++++++++++++++++++++common ++++++++++++++++++-->
    HWCompositing: true ,//是否启用硬件加速
    useTransition: true,// 是否使用CSS3的Transition属性
    useTransform: true ,//是否使用CSS3的Transform属性
    probeType: 1 ,//滚动的时候会派发scroll事件，会截流。2滚动的时候实时派发scroll事件，不会截流。 3除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
    })
    //事件api
    beforeScrollStart - 滚动开始之前触发
    scrollStart - 滚动开始时触发
    scroll - 滚动时触发
    scrollCancel - 取消滚动时触发
    scrollEnd - 滚动结束时触发
    touchend - 手指移开屏幕时触发
    flick - 触发了 fastclick 时的回调函数
    refresh - 当 better-scroll 刷新时触发
    destroy - 销毁 better-scroll 实例时触发

{
 <!--scroll组件 -->
    scrollY: true ,//滚动方向为 Y 轴
    scrollX: true ,//滚动方向为 X 轴
    startX: 0 ,// 开始的X轴位置
    startY: 0,//开始的Y轴位置
    click: true ,//是否派发click事件，通常判断浏览器派发的click还是betterscroll派发的click，可以用event._constructed，若是BS派发的则为true
    momentum: true,// 当快速滑动时是否开启滑动惯性
    bounce: true,// 是否启用回弹动画效果
}
 //事件api
    scrollTo(x, y, time, easing) -滚动到某个位置，x,y 代表坐标，time 表示动画时间，easing 表示缓动函数
         example: scroll.scrollTo(0, 500);
    scrollToElement(el, time, offsetX, offsetY, easing) - 滚动到某个元素，el（必填）表示 dom 元素，time 表示动画时间，offsetX 和 offsetY 表示坐标偏移量，easing 表示缓动函数
    refresh() - 强制scroll重新计算，当better-scroll中的元素发生变化的时候调用此方法

     <!--slide组件-->
    {
        snap: {
            loop: this.loop,
            threshold: 0.3,
            speed: 400
        }, //该属性是给slider组件使用的，1.0.0版本以上需按此配置
        snapLoop: true,// 是否可以无缝循环轮播
        snapThreshold:0.1,//用手指滑动时页面可切换的阈值，大于这个阈值可以滑动的下一页
        snapSpeed: 400,//轮播图切换的动画时间
        swipeTime: 2500,// swipe 持续时间
        bounceTime: 700,// 弹力动画持续的毫秒数
    }
    //事件api
      getCurrentPage() - snap为true时，获取滚动的当前页，返回的对象结构为 {x, y, pageX, pageY}，其中x,y代表滚动横向和纵向的位置；pageX，pageY 表示横向和纵向的页面索引。用法如：getCurrentPage().pageX
        goToPage(x, y, time, easing) - snap 为 true，滚动到对应的页面，x
        表示横向页面索引，y表示纵向页面索引，time表示动画，easing表示缓动函数（可省略不写）   
        next(time, easing) //滚动到下一个页面
        prev(time, easing) //滚动到上一个页面
        getCurrentPage() //获取当前页面的信息。

    <!--pick组件-->
    {
         wheel: {
            selectedIndex: (this.whellIndex[m])  || 0, //表示被选中的 wheel 索引
            rotate: 25, //表示被选中的 wheel 每一层的旋转角度
            adjustTime: 400,  //调整停留位置的时间
            wheelWrapperClass: 'wheel-scroll', 
            wheelItemClass: 'wheel-item'
        }
        //如果配置为 Object 的时候wheelWrapperClass 和 wheelItemClass 必须对应于你的实例 better-scroll 的 wrapper 类名和 wrapper 内的子类名。二者的默认值是 "wheel-scroll"/"wheel-item"，如果你不配置或者配置的名称和你对应DOM节点的类名不一致的话会导致一个问题：滚动起来的时候点击一下终止滚动并不会触发 scrollEnd 事件，进而影响诸如城市选择器联动数据的这种组件的结果。
    }
     //事件api
        wheelTo(index)//当我们做picker组件的时候，调用该方法可以滚动到索引对应的位置。
        getSelectedIndex() //获取当前选中的索引值。
        enable()启用 better-scroll，默认开启
        disable()  禁用 better-scroll
        destroy() 销毁 better-scroll，解绑事件

让我们更好的滑动起来

'overflow: scroll'在iOS上滑动卡顿初体验