仿IOS无限滚轮 – 有爱前端

http://runjs.cn/detail/dues9ues
ionic为基础的无限滚轮选择器，可选择周或自定义数字范围

<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="utf-8"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/ionic/1.3.2/css/ionic.css"> <script type="text/javascript" src="http://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <style type="text/css"> .scroll-container{ margin-top: 10px; width: 100%; height: 200px; perspective: 800px; perspective-origin: 50% 50%; overflow: hidden; } .stage { position: absolute; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.2s; -webkit-transition: transform 0.2s; } .scroll-item { background: white; backface-visibility: hidden; -webkit-backface-visibility: hidden; position: absolute; width: 50vw; height: 40px; left: 25vw; top: 80px; text-align: center; line-height: 40px; color: #d5d5d5; transition: color 0.5s; -webkit-transition: color 0.5s; } .scroll-item.selected{ color: #333333; } .year{ margin-top: 5vh; margin-bottom: 5vh; width: 30vw; margin-left: 35vw; text-align: center; left: 0; height: 40px; line-height: 40px; top: 30px; font-size: 1.2em; border-bottom: 1px solid #959595; } .select-week{ margin-top: 5vh; width: 30vw; margin-left: 35vw; border: none; box-shadow: 0 0 1px 1px #959595; height: 40px; line-height: 40px; text-align: center; color: #959595; font-size: 1.2em; border-radius: 20px; } </style> </head> <body ng-controller="MyInfoCtrl"> <ion-view view-title="我的" > <ion-content overflow-scroll="true" on-scroll="false">  <infinity-scroll></infinity-scroll> <hr style="margin-top: 50px">  <infinity-scroll type='number' title-text='date' min='1' max='31'></infinity-scroll> </ion-content> </ion-view> <script type="text/javascript"> angular.module("myApp", ["ionic"]) .controller('MyInfoCtrl', function ($scope) { }) .directive('infinityScroll', function () { return { restrict: 'AE', scope: { type: '=type', max: '=max', min: '=min', titleText: '=titleText' }, template: '<div class="year" on-release="onReleaseYear($event)"> {{year}} </div>' + '<div class="scroll-container" on-drag="onDragScroll($event)" on-release="onReleaseScroll($event)">' + '<div class="stage" ng-style="stageRotate">' + '<div class="scroll-item" ng-repeat="week in weeks track by $index" ng-style="rotates[$index]" ng-class="{true:\'selected\'}[nowIndex == $index]">{{getShowString(week)}}' + '</div>' + '</div>' + '</div>' + '<div class="select-week" ng-click="selectItem()">确定</div>', link: function (scope, element, attrs) { scope.rotates = []; scope.sourceDeg = 180; scope.weeksIndex = []; var weekNum = 16; scope.nowIndex = weekNum / 2; scope.stageRotate = { "transform": "rotateX(" + scope.sourceDeg + "deg)", "-webkit-transform": "rotateX(" + scope.sourceDeg + "deg)" }; for (var i = 0; i < weekNum; i++) { scope.weeksIndex.push(i); } scope.baseDeg = 360 / scope.weeksIndex.length; for (var i = (weekNum - 1); i >= 0; i--) { var deg = 360 / weekNum * (weekNum - i); scope.rotates[i] = { "transform": "rotateX(" + deg + "deg) translateZ(90px)", "-webkit-transform": "rotateX(" + deg + "deg) translateZ(90px)" }; } function getLastDeg(deg) { return (Math.round(deg / scope.baseDeg) + 1) * scope.baseDeg; } function getNextIndex(nowIndex) { var temp = nowIndex + 1; if (temp > (weekNum - 1)) temp = 0; return temp; } function getPrevIndex(nowIndex) { var temp = nowIndex - 1; if (temp < 0) temp = weekNum - 1; return temp; } function getNowIndex(deg) { var temp = deg / scope.baseDeg % weekNum; scope.nowIndex = temp < 0 ? (weekNum + temp) : temp; refreshData(); } scope.lastDeg = 0; scope.onDragScroll = function ($event) { if(attrs.type == 'number'){ if(scope.weeks[scope.nowIndex] <= min && $event.gesture.deltaY > 0){ return ; } if(scope.weeks[scope.nowIndex] >= max && $event.gesture.deltaY < 0){ return ; } } scope.lastDeg = scope.sourceDeg - $event.gesture.deltaY / 2; scope.stageRotate = { "transform": "rotateX(" + scope.lastDeg + "deg)", "-webkit-transform": "rotateX(" + scope.lastDeg + "deg)" }; getNowIndex(scope.lastDeg); }; scope.onReleaseScroll = function ($event) { if ($event.gesture.deltaY > 0) scope.sourceDeg = getLastDeg(scope.lastDeg) - scope.baseDeg; else scope.sourceDeg = getLastDeg(scope.lastDeg - scope.baseDeg); scope.stageRotate = { "transform": "rotateX(" + scope.sourceDeg + "deg)", "-webkit-transform": "rotateX(" + scope.sourceDeg + "deg)" }; }; if(attrs.type == 'number'){ scope.year = attrs.titleText ? attrs.titleText : 'title'; var min = attrs.min ? Number.parseInt(attrs.min) : 0; var max = attrs.max ? attrs.max : 100; function refreshData() { scope.nowIndex = Math.round(scope.nowIndex); if (scope.nowIndex > (weekNum - 1)) scope.nowIndex -= weekNum; var needChangeUpIndex = scope.nowIndex - weekNum / 4; if (needChangeUpIndex < 0) needChangeUpIndex = weekNum + needChangeUpIndex; if(scope.weeks[getNextIndex(needChangeUpIndex)] == '' || scope.weeks[getNextIndex(needChangeUpIndex)] - 1 < min) scope.weeks[needChangeUpIndex] = ''; else scope.weeks[needChangeUpIndex] = scope.weeks[getNextIndex(needChangeUpIndex)] - 1; var needChangeDownIndex = scope.nowIndex + weekNum / 4; if (needChangeDownIndex > (weekNum - 1)) needChangeDownIndex = needChangeDownIndex - weekNum; if(scope.weeks[getPrevIndex(needChangeDownIndex)] == '' || scope.weeks[getPrevIndex(needChangeDownIndex)] + 1 > max) scope.weeks[needChangeDownIndex] = ''; else scope.weeks[needChangeDownIndex] = scope.weeks[getPrevIndex(needChangeDownIndex)] + 1; } scope.weeks = []; for (var i = min; i < weekNum + min; i++) { scope.weeks[i - min] = i; } scope.getShowString = function(item){ return item; }; scope.onReleaseYear = function ($event) { }; scope.selectItem = function () { alert(scope.weeks[scope.nowIndex]); }; } else { function refreshData() { scope.nowIndex = Math.round(scope.nowIndex); if (scope.nowIndex > (weekNum - 1)) scope.nowIndex -= weekNum; scope.year = scope.weeks[scope.nowIndex].getFullYear(); var needChangeUpIndex = scope.nowIndex - weekNum / 4; if (needChangeUpIndex < 0) needChangeUpIndex = weekNum + needChangeUpIndex; var UpDate = new Date(scope.weeks[getNextIndex(needChangeUpIndex)]); UpDate.setDate(UpDate.getDate() - 7); scope.weeks[needChangeUpIndex] = UpDate; var needChangeDownIndex = scope.nowIndex + weekNum / 4; if (needChangeDownIndex > (weekNum - 1)) needChangeDownIndex = needChangeDownIndex - weekNum; var DownDate = new Date(scope.weeks[getPrevIndex(needChangeDownIndex)]); DownDate.setDate(DownDate.getDate() + 7); scope.weeks[needChangeDownIndex] = DownDate; } scope.today = new Date(); scope.year = scope.today.getFullYear(); scope.chooseWeek = ""; function formatDate(value) { if (parseInt(value) < 10) { return '0' + value; } return value; } scope.getShowString = function (date) { var day = date.getDay(); var weekStart = new Date(date); weekStart.setDate(weekStart.getDate() - (day - 1)); var weekEnd = new Date(date); weekEnd.setDate(weekEnd.getDate() + (7 - day)); return formatDate(weekStart.getMonth() + 1) + '月' + formatDate(weekStart.getDate()) + '日 ~ ' + formatDate(weekEnd.getMonth() + 1) + '月' + formatDate(weekEnd.getDate()) + '日'; }; function initWeeks(year) { scope.weeks = []; var listDate = new Date(); listDate.setFullYear(year); listDate.setDate(scope.today.getDate() - 6 * 7); for (var i = 0; i < weekNum; i++) { var tempDate = new Date(listDate); scope.weeks[i] = tempDate; listDate.setDate(listDate.getDate() + 7); } } initWeeks(scope.today.getFullYear()); scope.onReleaseYear = function ($event) { var slideLeft = $event.gesture.deltaX < 0; if (slideLeft) scope.year++; else scope.year--; initWeeks(scope.year); }; scope.selectItem = function (nowIndex) { alert(scope.getShowString(scope.weeks[scope.nowIndex])); }; } } } }); </script> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 仿IOS无限滚轮