单向轮播图+导航栏原理探究

主要矛盾：临界问题
处理区域：标题栏和内容区域
常态：可左右滚动，可上下滚动。上拉加载，下拉刷新。
标题：可以左右滑动切换标题栏，可以上下滑动列表内容，可以实现上拉加载，下拉刷新，
左右滑动时内容不发生位置偏移。
问题：左右滑动时，伴随着轻微的上下滑动，影响当前滑动项位置发生上下偏移？
添加功能：进度条功能，伴随着左右滑动切换标题栏激活选中项，伴随着点击标题项，内容横向偏移。
方案：
    轮播图+scroll
    onTouchStart move end 
    在move中对滑动进行判断，通过xy值在3px内的偏移量决定用户向哪个位置移动，
轮播图嵌套横向滚动问题场景：
    定义：当前轮播图为单向轮播图，内部嵌套内容区域的滚动，轮播图纵向大小占用当前纵向剩余空间，
横跨整个屏幕，且不超出。
    实现：嵌套当前项内容滚动区域,大盒子嵌套四个小盒子，横向排布，小盒子占据纵向满位置，
横向超出隐藏无横向滚动条，纵向超出有滚动条



滚动条问题场景：

功能场景：1、当点击标题栏选项，通过transform(X00vw)进行移动内容区域
      2、当用户在内容区域上下滑动时，通过move-start in 10px禁用左右位移X值的变化来保证不发生横向
偏移。
      3、当用户横向滑动切换标题栏时，通过move-start in 10px禁用纵向滚动条，改变X来横向偏移，
带动进度条的位置。
      4、当横向位移不到50%屏幕宽度时，onTouchend结束时，标题栏和内容区域位置不变，否则，相反。
      5、滚动条问题，当横向滑动屏幕时，滚动条时禁用的，放开后开启滚动条，纵向滚动条出现。
      6、下拉刷新问题，当前有滚动条，且滚动条位置位于顶部，进行纵向滑动，禁用横向滑动。
      7、下拉刷新问题，在6基础上，进行下拉刷新，添加动画效果,下拉时，在move中进行对于内容区域的位
置进行等比下移>><<上移。
      8、在7基础上，对于用户动作结束，在end中，纵向偏移量大于刷新基础值，进行刷新，否则不刷新。
      9、在8基础上，进行刷新后，处理数据，这时，将加载数据放在数组头部，恢复内容区域原来位置，
恢复可上下滚动状态。
      10、在8基础上，未达到刷新数据标准，直接恢复常态。
      11、上拉加载，数据达到底部后进行触底加载更多数据。
      12、在11基础上，滚动条触底或还有一段距离时进行，加载更多数据，放在数组尾部。
结论：添加监听数据较多，适用于框架情景下，轮播图组件/原生轮播图+原生开发进行封装新的组件导航，
兼容性问题严重。