-
Notifications
You must be signed in to change notification settings - Fork 458
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #139 from pearlwang1106/master
mip-gototop 更新布局，支持iframe下使用
- Loading branch information
Showing
6 changed files
with
76 additions
and
235 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,152 +1,39 @@ | ||
| /** | ||
| * @file 回顶gototop | ||
| * | ||
| * | ||
| * @author wangpei07 | ||
| * @time 2016.08.09 | ||
| * @date 2016-11-29 | ||
| */ | ||
|
|
||
| define(function (require) { | ||
| var $ = require('zepto'); | ||
| var customElement = require('customElement').create(); | ||
|
|
||
| require('./createTween'); | ||
| var gotopVisible = false; | ||
| var $gototop; | ||
| var $page; | ||
| var isHidden = false; | ||
| var lastPageTop = 0; | ||
| var pageTop = window.pageYOffset; | ||
| /** | ||
| * build | ||
| */ | ||
| function build() { | ||
| var _element = this.element; | ||
| if (_element.isRender) { | ||
| return; | ||
| } | ||
|
|
||
| _element.isRender = true; | ||
|
|
||
| var gototop_html = [ | ||
| '<div class="mip-gototop">', | ||
| ' <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADsAAAA8CAYAAADYIMILAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4N2M5ODc5Zi0xMDMxLTRjZWYtOWViMy1lMmIxNzNkMDU1MTAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUEwOTQ3MUIxMDdEMTFFNkIwNDFFMDRENzk5MUQ2RDIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUEwOTQ3MUExMDdEMTFFNkIwNDFFMDRENzk5MUQ2RDIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxM2I0YTVjYS1mNzQ0LTRhMGEtYjI0Yy02NmM1N2I3NTE2NGIiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDozYThhODFlZS01OGQ4LTExNzktYmYwNi1lNTU4YzcyN2M2NTkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6FlgSqAAACS0lEQVR42uzbO0hbYRQH8JtLqYKU4ANBO7RQijjooHVx6uRktw6FFju1UIRIBwdFLfZBHcSWFjo5FLfi5pap7eAUB6dCO5RSh0BRQ8CISqn+v3IOhENyE+/DfPfm/OHv43gdft7XdyNJDSOO42TQDie52UffuU0AdciXcZ3mScpg36OFhEP3zGF8CR+20Ilm2LXNdBgrVrEhZQRdQz+iw0nGdqNTaDvaic6hQ0nEGuhrNF02M3eCWXQgSViGdlf4WQu6gPYlAesF5bSii+iNOGPrgXLaCHwtjtjzQDnmfH6B9sYJWw36tcK26+J7c6V+dc4/UsOwXtCVCtube+6GmHWhL+mztdha0H9Vfm8VzYpZD4HTNmL9Qk1O0Q/oZzG/SuArNmGDQDlmm7fopphfp6t0mw3YMKDl4GU0J+Y30We0AGkYNkwo5y+6hG6LeT+ttC43AhsFlHNC5+o3MR9EZ2hNfWHYKKGcY/Q5+kPMb6HTfneSayGUU6Jz9ZeYj6JP/YBdS6GcA3ru3RHz2+gkmooCWw36JUIop4jOo3kxH0MfhY31gr6JGMrZoz28K+Z30IdhYW2Acv7QKxv7Yn4XvRcU22URlJOnQ7oo5vfR8SDYJ5ZBOb9pgVES8wdBsGkLoZyfdFs6FKsv39hP6BF9nbUIyvlODwnm0C7Qk5NnvJZeObrStVa4KNgSs6R8XO/GtdaZh+JQiXX0fz2KVaxiFatYxSpWsYpVrGIVq1jFKlaxilWsYhVrHbb8xfZC0rH8HqL/77O5aOyZAAMARRuDCbImm0EAAAAASUVORK5CYII=">', | ||
| '</div>' | ||
| ].join(''); | ||
|
|
||
| // 加载dom | ||
| $(_element).append(gototop_html); | ||
|
|
||
| $gototop = $(_element).find('.mip-gototop'); | ||
| $page = $('body'); | ||
|
|
||
| // 点击时间绑定 | ||
| $gototop.on('click', function() { | ||
| animationGotoTop($gototop); | ||
| }); | ||
|
|
||
| // 监听页面滚动，实时记录滚动位置 | ||
| $page.on('touchstart', function() { | ||
| }).on('touchmove', function(e) { | ||
| handleScroll(e); | ||
| }).on('touchend', function(e) { | ||
| }); | ||
|
|
||
| // 监听window滚动 | ||
| $(window).scroll(function(e){ | ||
| handleScroll(e); | ||
| }); | ||
| } | ||
|
|
||
|
|
||
| /** | ||
| * [showGotoTop 按钮显示控制函数] | ||
| * | ||
| * @param {Boolean} visible [是否显示控制参数] | ||
| * @return | ||
| */ | ||
| function showGotoTop(visible) { | ||
|
|
||
| if (gotopVisible === visible) return; | ||
|
|
||
| gotopVisible = visible; | ||
|
|
||
| if (visible) { | ||
| $gototop.show().createTween({}, { | ||
| opacity: 1 | ||
| }, { | ||
| duration: 300 | ||
| }); | ||
| } else { | ||
| $gototop.show().createTween({}, { | ||
| opacity: 0 | ||
| }, { | ||
| duration: 300 | ||
| }, function() { | ||
| $gototop.hide(); | ||
| }); | ||
| } | ||
| } | ||
|
|
||
|
|
||
| /** | ||
| * [animationGotoTop 动画函数] | ||
| * | ||
| * @param {Object} $gototop [回顶按钮] | ||
| * @return | ||
| */ | ||
| function animationGotoTop($gototop) { | ||
|
|
||
| $page.createTween({ | ||
| '-webkit-transform': 'translateY(0)' | ||
| }, { | ||
| '-webkit-transform': 'translateY(' + pageTop + 'px)' | ||
| }, { | ||
| duration: 500 | ||
| }, function() { | ||
| $page.css('-webkit-transform', 'translateY(0)'); | ||
| window.scrollTo(0, 0); | ||
| showGotoTop(false); | ||
| $page.css('-webkit-transform', 'none'); | ||
| }); | ||
|
|
||
| } | ||
|
|
||
| var util = require('util'); | ||
| var viewport = require('viewport'); | ||
| const YOFFSET = 200; | ||
|
|
||
| /** | ||
| * [handleScroll 页面滚动处理函数] | ||
| * | ||
| * @param {Object} e | ||
| * @return | ||
| * build 组件build | ||
| */ | ||
| function handleScroll(e) { | ||
|
|
||
| if (isHidden) return; | ||
|
|
||
| // 获取位置信息 | ||
| pageTop = window.pageYOffset; // 页面滚动位置 | ||
| var winHeight = window.innerHeight; // 窗口高度 | ||
|
|
||
| // 当滚动位置超过顶部时 | ||
| if (pageTop > 0) { | ||
|
|
||
| // 当滚动位置超过页面高度+1屏幕高度，并且有回拉动作时，显示回顶按钮 | ||
| if (pageTop >= winHeight) { | ||
| if (lastPageTop > pageTop) { | ||
| showGotoTop(true); | ||
| } | ||
| } else { | ||
| showGotoTop(false); | ||
| customElement.prototype.build = function () { | ||
| var self = this; | ||
| var element = self.element; | ||
| var threshold = element.getAttribute('threshold') || YOFFSET; | ||
|
|
||
| viewport.on('scroll', function () { | ||
| var scrollTop = viewport.getScrollTop(); | ||
| if (scrollTop > threshold) { | ||
| util.css(element, {opacity: 1}); | ||
| } | ||
| else { | ||
| util.css(element, {opacity: 0}); | ||
| } | ||
| }); | ||
|
|
||
| // 记录上一次滚动位置 | ||
| lastPageTop = pageTop; | ||
| } | ||
|
|
||
| } | ||
|
|
||
| customElement.prototype.build = build; | ||
| element.addEventListener('touchend', function () { | ||
| viewport.setScrollTop(0); | ||
| }, false); | ||
| }; | ||
|
|
||
| return customElement; | ||
|
|
||
| }); | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,44 +1,15 @@ | ||
| body { | ||
| position: static; | ||
| } | ||
| .mip-gototop { | ||
| position: fixed; | ||
| right: 20px; | ||
| bottom: 40px; | ||
| border-radius: 50%; | ||
| border: 1px solid #ccc; | ||
| box-shadow: 0 1px 3px rgba(0, 0, 0, .2); | ||
| width: 50px; | ||
| height: 50px; | ||
| background-color: rgba(255, 255, 255, .93); | ||
| z-index: 99; | ||
| mip-gototop { | ||
| display: block; | ||
| border-radius: 5px; | ||
| width: 36px; | ||
| height: 36px; | ||
| opacity: 0; | ||
|
|
||
| } | ||
| .mip-gototop img { | ||
| display: block; | ||
| margin: 17px auto 0; | ||
| width: 20px; | ||
| height: 20px; | ||
| background-size: 50% 50%; | ||
| background-repeat: no-repeat; | ||
| background-position: 50% 50%; | ||
| border: 1px solid #999; | ||
| background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADsAAAA8CAYAAADYIMILAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4N2M5ODc5Zi0xMDMxLTRjZWYtOWViMy1lMmIxNzNkMDU1MTAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUEwOTQ3MUIxMDdEMTFFNkIwNDFFMDRENzk5MUQ2RDIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUEwOTQ3MUExMDdEMTFFNkIwNDFFMDRENzk5MUQ2RDIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxM2I0YTVjYS1mNzQ0LTRhMGEtYjI0Yy02NmM1N2I3NTE2NGIiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDozYThhODFlZS01OGQ4LTExNzktYmYwNi1lNTU4YzcyN2M2NTkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6FlgSqAAACS0lEQVR42uzbO0hbYRQH8JtLqYKU4ANBO7RQijjooHVx6uRktw6FFju1UIRIBwdFLfZBHcSWFjo5FLfi5pap7eAUB6dCO5RSh0BRQ8CISqn+v3IOhENyE+/DfPfm/OHv43gdft7XdyNJDSOO42TQDie52UffuU0AdciXcZ3mScpg36OFhEP3zGF8CR+20Ilm2LXNdBgrVrEhZQRdQz+iw0nGdqNTaDvaic6hQ0nEGuhrNF02M3eCWXQgSViGdlf4WQu6gPYlAesF5bSii+iNOGPrgXLaCHwtjtjzQDnmfH6B9sYJWw36tcK26+J7c6V+dc4/UsOwXtCVCtube+6GmHWhL+mztdha0H9Vfm8VzYpZD4HTNmL9Qk1O0Q/oZzG/SuArNmGDQDlmm7fopphfp6t0mw3YMKDl4GU0J+Y30We0AGkYNkwo5y+6hG6LeT+ttC43AhsFlHNC5+o3MR9EZ2hNfWHYKKGcY/Q5+kPMb6HTfneSayGUU6Jz9ZeYj6JP/YBdS6GcA3ru3RHz2+gkmooCWw36JUIop4jOo3kxH0MfhY31gr6JGMrZoz28K+Z30IdhYW2Acv7QKxv7Yn4XvRcU22URlJOnQ7oo5vfR8SDYJ5ZBOb9pgVES8wdBsGkLoZyfdFs6FKsv39hP6BF9nbUIyvlODwnm0C7Qk5NnvJZeObrStVa4KNgSs6R8XO/GtdaZh+JQiXX0fz2KVaxiFatYxSpWsYpVrGIVq1jFKlaxilWsYhVrHbb8xfZC0rH8HqL/77O5aOyZAAMARRuDCbImm0EAAAAASUVORK5CYII=); | ||
| background-color: #fff; | ||
|
|
||
| } | ||
| /* | ||
| .mip-gototop { | ||
| position: fixed; | ||
| right: 20px; | ||
| bottom: 40px; | ||
| border-radius: 50%; | ||
| border: 1px solid #ccc; | ||
| box-shadow: 0 1px 3px rgba(0, 0, 0, .2); | ||
| width: 50px; | ||
| height: 50px; | ||
| background-color: rgba(255, 255, 255, .93); | ||
| z-index: 99; | ||
| opacity: 0; | ||
|
|
||
| } | ||
| .mip-gototop img { | ||
| display: block; | ||
| margin: 17px auto 0; | ||
| width: 20px; | ||
| height: 20px; | ||
| }*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,12 @@ | ||
| { | ||
| "name": "mip-gototop", | ||
| "version": "1.0.2", | ||
| "version": "1.0.1", | ||
| "author": { | ||
| "name": "MIP authors", | ||
| "email": "mip-support@baidu.com", | ||
| "name": "wangpei07", | ||
| "email": "wangpei07@baidu.com", | ||
| "url": "https://www.mipengine.org" | ||
| }, | ||
| "engines": { | ||
| "mip": ">=1.1.0" | ||
| "mip": ">=1.0.5" | ||
| } | ||
| } |