Fork me on GitHub

实现小小的fullpage(二)

之前写的一个小小的fullpage,今天又来第二弹了。因为遇到了问题,值得这次记录下来。

问题

之前写的fullpage看似完美,简单易移植。但是今天测试给我提了个bug。说当滚动了一屏之后,再最大化或者最小化窗口的时候就会没有占满屏幕。憋屈

解决问题

这个一定是缺少监听resize事件了。

resize事件

1
2
3
$(window).on('resize', function() {
$container.find('.slide').css('height', $container.height() + 'px');
});

很简单。只要监听resize事件,然后将每个slide的高度给重新设置高度。

但是当前current在第二屏的时候,当最大化的时候,第一屏的高度增加了,但是外层的scrollContainer的偏移并没有改变,所以还得在调用一次page的move方法。

1
2
3
4
$(window).on('resize', function() {
$container.find('.slide').css('height', $container.height() + 'px');
page.move(current);
});

过渡问题

接着上面,在最大化后重新调用一次move操作。但是默认是有过渡效果的,这样用户感觉就怪怪的。所以就要去取消过渡效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
move: function(index, bAnimation) {
var di = -(index-1)*$container.height();
page.start = +new Date();
if(di !== predi) {
page.isScrolling = true;
if(bAnimation) {
$scroll.removeClass('transition');
$scroll.css('transform', 'translateY('+di+'px)');
page.isScrolling = false;
}else {
$scroll.addClass('transition');
$scroll.css('transform', 'translateY('+di+'px)');
}
predi = di;
}else {
page.isScrolling = false;
}
}

move操作做了几点优化

  1. 增加predi用来保留之前的偏移值。因为在第一屏时,最大化窗口。其实是没有发生滚动的。
  2. 将过渡效果提取到transition css类中。
  3. 增加bAnimation参数,用来控制是否过渡。

小结

在实际项目中不可能为了这一点点需求,而引入一个完整的fullpage库。而自己造简单的轮子也不可能考虑到很全面。只是对于这个项目很适合也能满足。而遇到问题,尽量做简单处理,便于维护。

完整例子http://xiaoqiang730730.github.io/resources/demo/fullpage/index.html

本文地址 http://xiaoqiang730730.github.io/2016/08/05/fullpage2/

觉得有点意思,打个赏鼓励博主继续写哈!がんばって
前端-小强 WeChat Pay

微信打赏

前端-小强 Alipay

支付宝打赏