angularjs fullpage全屏滚动插件
1.bower 安装
bower install --save angular-fullpage.js2.index.html引入
<link href="lib/fullpage/jquery.fullPage.css"></link>
<script src="lib/fullpage/vendors/jquery.slimscroll.min.js"></script>
<script src="lib/fullpage/jquery.fullPage.min.js"></script>
3.directives 自定义指令
var aciAPP = angular.module('aciAPP', [ 'ui.router'])
aciAPP.directive('fullPage', fullPage);
fullPage.$inject = ['$timeout'];
function fullPage($timeout) {
var directive = {
restrict: 'A',
scope: {options: '='},
link: link
};
return directive;
function link(scope, element) {
var pageIndex;
var slideIndex;
var afterRender;
var onLeave;
var onSlideLeave;
if (typeof scope.options === 'object') {
if (scope.options.afterRender) {
afterRender = scope.options.afterRender;
}
if (scope.options.onLeave) {
onLeave = scope.options.onLeave;
}
if (scope.options.onSlideLeave) {
onSlideLeave = scope.options.onSlideLeave;
}
} else if(typeof options === 'undefined') {
scope.options = {};
}
var rebuild = function() {
destroyFullPage();
$(element).fullpage(sanatizeOptions(scope.options));
if (typeof afterRender === 'function') {
afterRender();
}
};
var destroyFullPage = function() {
if ($.fn.fullpage.destroy) {
$.fn.fullpage.destroy('all');
}
};
var sanatizeOptions = function(options) {
options.afterRender = afterAngularRender;
options.onLeave = onAngularLeave;
options.onSlideLeave = onAngularSlideLeave;
function afterAngularRender() {
//We want to remove the HREF targets for navigation because they use hashbang
//They still work without the hash though, so its all good.
if (options && options.navigation) {
$('#fp-nav').find('a').removeAttr('href');
}
if (pageIndex) {
$timeout(function() {
$.fn.fullpage.silentMoveTo(pageIndex, slideIndex);
});
}
}
function onAngularLeave(page, next, direction){
if (typeof onLeave === 'function' && onLeave(page, next, direction) === false) {
return false;
}
pageIndex = next;
}
function onAngularSlideLeave(anchorLink, page, slide, direction, next) {
if (typeof onSlideLeave === 'function' && onSlideLeave(anchorLink, page, slide, direction, next) === false) {
return false;
}
pageIndex = page;
slideIndex = next;
}
//if we are using a ui-router, we need to be able to handle anchor clicks without 'href="#thing"'
$(document).on('click', '[data-menuanchor]', function () {
$.fn.fullpage.moveTo($(this).attr('data-menuanchor'));
});
return options;
};
var watchNodes = function() {
return element[0].getElementsByTagName('*').length;
};
scope.$watch(watchNodes, rebuild);
scope.$watch('options', rebuild, true);
element.on('$destroy', destroyFullPage);
}
}
4. angular单页路由配置 state中加入(controllerAs:‘vm‘),controller就是定义$scope作用域连用的,controllerAs可以用原声js 的this
$stateProvider
.state('aolsee.home', {
url: '/home',
templateUrl: 'templates/aolsee/home.html',
controller: 'HomeController',
controllerAs:'vm'
})
5.controller控制器
this.homeOptions = {
//不使用css3 transforms滚动
css3:false,
//重新设置滚动方式
easing: 'easeInExpo',
//滚动速度
scrollingSpeed:'1000',
afterLoad: function(anchorLink, index){
//滚动到某一屏后的回调函数,接收 anchorLink 和 index 两个参数,anchorLink 是锚链接的名称,index 是序号,从1开始计算
},
onLeave: function(index, nextIndex, direction){
//滚动前的回调函数,接收
index、nextIndex 和 direction 3个参数:
//index 是离开的“页面”的序号,从1开始计算;
//nextIndex 是滚动到的“页面”的序号,从1开始计算;
//direction 判断往上滚动还是往下滚动,值是 up 或 down
}
}
6.home.html使用指令
//一个section为一屏,内容可*添加
<div full-page options="vm.homeOptions">
<div class="section"></div>
<div class="section"></div>
<div class="section"> </div>
<div class="section"></div>
</div>
7.效果图