diff --git a/mip-fixed/README.md b/mip-fixed/README.md index 39b85130f..a3f6330af 100644 --- a/mip-fixed/README.md +++ b/mip-fixed/README.md @@ -59,6 +59,14 @@ ``` +### 支持 mip-gototop + +```html + + + +``` + ### 关闭悬浮元素的方法 1、给 mip-fixed 标签添加一个自定义的 id：customid @@ -96,13 +104,16 @@ 取值范围：数值+单位，例如：50(px|em|rem|vh|vw|vmin|vmax|cm|mm|q|in|pc|pt) 默认值：auto + ## 注意事项 ### 悬浮类型 -- type为top、bottom 类别不需要添加属性：top/bottom； +- type为 top、bottom 类别不需要添加属性：top/bottom； -- type为left、right 类别需要至少添加一个top/bottom属性，优先用 bottom。 +- type为 left、right 类别需要至少添加一个top/bottom属性，优先用 bottom。 + +- type为 gototop 类别不需要任何属性。 ### fixed 元素个数限制 @@ -112,3 +123,5 @@ - `left + right <= 1` +- `gototop <= 1` + diff --git a/mip-gototop/README.md b/mip-gototop/README.md index 1dcd03c0b..4b2a04bb4 100644 --- a/mip-gototop/README.md +++ b/mip-gototop/README.md @@ -5,28 +5,31 @@ mip-gototop 提供了一个用来支持网页快速回顶按钮，用来支持 标题|内容 ----|---- 类型|通用 -支持布局|responsive,fixed-height,fill,container,fixed -所需脚本|https://mipcache.bdstatic.com/static/v0.1/mip-gototop.js +支持布局|N/S +所需脚本|https://mipcache.bdstatic.com/static/v1/mip-gototop/mip-gototop.js ## 示例 -mip-gototop 按钮 +### 基本使用 ```html - -
- -
+ + + ``` + +### 设置阈值 + +```html + + + +``` + +## 属性 + +说明：显示按钮时页面已经滚动的高度 +必选项: 否 +取值范围：数值 +单位：无 +默认值：200 diff --git a/mip-gototop/createTween.js b/mip-gototop/createTween.js deleted file mode 100755 index 82612eeb0..000000000 --- a/mip-gototop/createTween.js +++ /dev/null @@ -1,33 +0,0 @@ -define(function (require) { - var $ = require('zepto'); - - var mergeTransition = function(params) { - var transition = params.name || 'all'; - - transition += ' ' + (params.duration || 1000) / 1000 + 's'; - transition += ' ' + (params.ease || 'ease'); - - return transition; - } - - Zepto.fn.createTween = function(start, end, params, callback) { - var $this = this; - var transition = mergeTransition(params); - var transitionEnd = 'webkitTransitionEnd.feed'; - - $this.css('transition', 'none').css(start); - $this[0].getBoundingClientRect(); - setTimeout(function() { - $this.css('transition', transition).css(end); - }, params.delay || 0); - - $this.off(transitionEnd).on(transitionEnd, function(e) { - if (e.target === this) { - $this.off(transitionEnd); - $this.css('transition', 'none'); - callback && callback(); - } - }); - } - return Zepto; -}); diff --git a/mip-gototop/mip-gototop.js b/mip-gototop/mip-gototop.js index a9d81f2c7..dbc0743de 100755 --- a/mip-gototop/mip-gototop.js +++ b/mip-gototop/mip-gototop.js @@ -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 = [ - '
', - ' ', - '
' - ].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; }); - diff --git a/mip-gototop/mip-gototop.less b/mip-gototop/mip-gototop.less index 798347165..d4ff5afc5 100755 --- a/mip-gototop/mip-gototop.less +++ b/mip-gototop/mip-gototop.less @@ -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; -}*/ \ No newline at end of file diff --git a/mip-gototop/package.json b/mip-gototop/package.json index cfcb4b481..e13d8b334 100644 --- a/mip-gototop/package.json +++ b/mip-gototop/package.json @@ -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" } } \ No newline at end of file