Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

原生实现一个手势视差翻页器 #147

Open
isaaxite opened this issue Feb 23, 2018 · 0 comments
Open

原生实现一个手势视差翻页器 #147

isaaxite opened this issue Feb 23, 2018 · 0 comments
Labels
FE

Comments

@isaaxite
Copy link
Owner

isaaxite commented Feb 23, 2018 •
edited

一句话需求

移动端实现一个轮播器，在轮播器上层有一个静止图层，不会随着轮播器翻页而偏移。
以下是两个已经实践的两个项目：

[Github]，欢迎各方Gay Man来Fork与Star！！！

 

需求分析

以上需求可以拆分成两个小的需求：

  • 实现一个轮播器；
  • 做个静止图层。

问题

轮播器作为一个图层，静止图层是一个。
那么那个图层在上，那个在下？

  1. 轮播器在上，则静止图层被轮播器遮盖；
  2. 静止图层在上，则绑定在轮播器上的手势事件由于被静止图层在上而无法触发。

再细分需求

为了显示静止图层，那么静止图层一定是要在上的。那么就必须解决第2个问题，怎么触发轮播器的手势。
我们可以通过监听静止图层或者两图层容器的手势，然后映射到轮播器。

 

实现

1 实现一个轮播器

由于网上的轮播器插件的都是封装好的，触发事件比较麻烦，因此选择自己使用原生js实现一个。
实现轮播器的方案有很多中，比如改变translate属性的，也有先实现一个scroll-view ，然后改变scroll-view的scrollLeft。我选用后者（单纯是因为我没有这样做过，而且好像很有趣）。

那么就先实现一个scroll-view。

一般scroll-view都是纵向的，根据以上需求，我们就需要实现一个横向的scroll-view，具体实现如下

<div id="app">
  <dl class="story">
    <dt></dt><dt></dt>
    <dt></dt><dt></dt><dt></dt>
    <dt></dt><dt></dt>
  </dl>
</div>
*{ margin: 0;padding: 0; }
html,body{ height: 100%; }
::-webkit-scrollbar{ display: none; }

#app{ height: 100%;position: relative; }

#app > .story{ position: absolute;top: 0;right: 0;bottom: 0;left: 0; }

#app > .story{ 
  z-index: 1000; border: 1px solid;
  overflow-x: auto;overflow-y: hidden; white-space: nowrap;font-size: 0;letter-spacing: 0;
  /* translateZ是是为了开启硬件加速 */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}

.story > dt{ height: 100%;width: 100%;display: inline-block;vertical-align: top;position: relative; }
.story > dt:nth-of-type(1){ background-color: red; }
.story > dt:nth-of-type(2){ background-color: orange; }
.story > dt:nth-of-type(3){ background-color: yellow; }
.story > dt:nth-of-type(4){ background-color: green; }
.story > dt:nth-of-type(5){ background-color: cyan; }
.story > dt:nth-of-type(6){ background-color: blue; }
.story > dt:nth-of-type(7){ background-color: purple; }

核心css为

overflow-x: auto;overflow-y: hidden; white-space: nowrap;

禁用块级元素的换行，依次达到横排的效果。
[查看源码：jsbin]
[查看源码：jsfiddle]
(ps：要看效果的gay man请点击[查看源码：jsbin]，并使用移动设备模式查看， 下同)

 

2 实现静止图层并监听其上的手势

先向#app中添加静止图层

<div id="app">
  <dl class="mash">
    <img src="http://ohi69gup6.bkt.clouddn.com/005TGG6vly1fes9jc0kk0g30b40b40tv.gif">
  </dl>
  ...
</div>

然后，来分析一下轮播器的功能

  1. 向左，向右滑动翻页；
  2. 轮播器卡片手势跟随。

第1点的实现思路

获取手指 “触碰屏幕那刻” 和 “离开屏幕那刻” 的位置，根据以上两个位置判断翻页方向，要获取这两位置，就需要分别注册touchstart和touchend事件，通过事件的回调参数( event )获取。

// 触碰屏幕那刻横向位置
var touchStartX = e.changedTouches[0].pageX;
// 离开屏幕那刻横向位置
var touchEndX = e.changedTouches[0].pageX;

判断滑动方向

var isNext = touchEndX - touchStartX < 0;

知道翻页方向就可以进行翻页
翻页如上文所说，通过改变卡片容器的scrollLeft。这里的容器是#app > .story。

document.querySelector("#app > .story").scrollLeft

想要实现翻页，还必须知道两个属性：

  1. 每页宽度：可以通过story.clientWidth获取；
  2. 当前页：使用全局变量记录当前是第几页。

具体实现如下：

var touchStartX = 0;
var currentPage = 1;
var mash = document.querySelector("#app > .mash");
var story = document.querySelector("#app > .story");
var screenWidth = story.clientWidth;

mash && mash.addEventListener('touchstart', function(e){
  var touch = e.changedTouches[0];
 touchStartX = touch.pageX;
}, false);

mash && mash.addEventListener('touchend', function(e){
  var touch = e.changedTouches[0];
  var touchEndX = touch.pageX;
  var isNext = touchEndX - touchStartX < 0;
  var oldCurrentPage = currentPage;
  var maxPage = story.children.length;
  var minPage = 1;

  currentPage = isNext ? currentPage + 1 : currentPage - 1;
  currentPage = currentPage > maxPage ? maxPage : currentPage;
  currentPage = currentPage < minPage ? minPage : currentPage;

  var targetScrollLeft = (currentPage - 1) * screenWidth;
  
  story.scrollLeft = targetScrollLeft;
}, false);

以上代码基本实现翻页，但是仅仅是通过每次 “增加/减少 一个screenWidth的距离” 达到翻页的目的，是不够的，因为你会发现翻页效果很生硬的，仅仅只有一帧。

下面让我们把翻页效果做得更加顺滑。
怎么做，使用定时器(setTimeout)？
不！不！不！当然不会！
我们使用requestAnimationFrame，至于为什么使用requestAnimationFrame而不使用setTimeout？请自行Google。接着，让我们先实现一个动画函数

function animate(callback) {
  var _animate = function(){
    var isValid = callback && callback();
    isValid && requestAnimationFrame(_animate);
  };

  requestAnimationFrame(_animate);
}

ok，然后要做的就是将它运用到翻页的代码中

// 设置每帧改变scrollLeft距离
var step = 30;
// ...

mash && mash.addEventListener('touchend', function(e){
  // ...
  animate(function() {
    var scrollLeft = story.scrollLeft;

    scrollLeft = isNext ? scrollLeft + step : scrollLeft - step;

    if(isNext && scrollLeft > targetScrollLeft) {
      story.scrollLeft = targetScrollLeft;
      return false;
    } else if(!isNext && scrollLeft < targetScrollLeft){
      story.scrollLeft = targetScrollLeft;
      return false;
    } else {
      story.scrollLeft = scrollLeft;
      return true;
    }
  });
}, false);

[查看源码：jsbin]
[查看源码：jsfiddle]

第2点的实现思路

第二点需要实现的功能是：轮播器卡片手势跟随。
假如你有试过以上代码实现的轮播器，你会发现一个问题：手指在未离开屏幕前，无论手指怎么滑动都不会有任何响应，这明显不是我们想要的。标准的轮播器应该是：当前卡片应该对手势做出响应，卡片跟随手指移动。

要实现以上效果，就需要监听手指未离开屏幕的前的动作，注册touchmove事件，获取手指每次移动的位置！

mash && mash.addEventListener('touchmove', function(e){
  var touch = e.changedTouches[0];
  var moveingfPageX = touch.pageX;
  var distance = -(moveingfPageX - touchStartX);
  var currentPageScrollLeft = (currentPage - 1) * screenWidth;

  story.scrollLeft = currentPageScrollLeft + distance;
}, false);

思路也是比较简单的，监听手指所在位置与初始位置touchStartX的距离，然后动态地改变story.scrollLeft。

另外，现在已经实现卡片的手势跟随，随之又可能有这么一种情况：
用户已经滑动卡片，但是在滑动后用户不想翻页了，转而想继续留在当前页，即 “后悔功能”。然后再看看当前我们的逻辑：

// ...
var isNext = touchEndX - touchStartX < 0;
// ...
currentPage = isNext ? currentPage + 1 : currentPage - 1;
currentPage = currentPage > maxPage ? maxPage : currentPage;
currentPage = currentPage < minPage ? minPage : currentPage;

以上逻辑是：如果不是上一页就是下一页。并没有实现后悔功能。

为实现后悔功能，我做如下修改

// 设置最小有效翻页距离（在手指离开屏幕时所偏移的横向距离），换言之，偏移距离小于30就触发后悔功能
var validFlipDistance = 30;

//  ...

mash && mash.addEventListener('touchend', function(e){
  //  ...
  var isValid = Math.abs(touchEndX - touchStartX) >= validFlipDistance;
  //  ...
  if(isValid) {
    currentPage = isNext ? currentPage + 1 : currentPage - 1;
    currentPage = currentPage > maxPage ? maxPage : currentPage;
    currentPage = currentPage < minPage ? minPage : currentPage;
  } else {
    // 触发后悔功能，改变滑动方向，由animate函数将卡片反向滑回初始位置
    isNext = !isNext;
  }
});

[查看源码: jsbin]
[查看源码: jsfiddle]

 

写在最后

我知道自己的实现并不是最佳实践，但是我想说的是：造轮子真爽！

 
@isaaxite isaaxite changed the title 手势视差翻页器实现 手把手使用原生只是实现一个手势视差翻页器 Feb 24, 2018
@isaaxite isaaxite changed the title 手把手使用原生只是实现一个手势视差翻页器 原生实现一个手势视差翻页器 Feb 24, 2018
@isaaxite isaaxite added the FE label May 6, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
FE
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@isaaxite