mip-fixed 悬浮布局

admin 2019-8-3 234

mip-fixed 悬浮布局

悬浮元素整体使用方案。

标题内容
类型通用
支持布局N/S

所需脚本

(window.MIP=window.MIP||[]).push({name:"mip-fixed",func:function(){define("mip-fixed/viewport-scroll",["require","util","viewport"],function(t){var e=(t("util"),t("viewport")),i={inited:!1,first:!0,animate:[],onscroll:function(t){if(t.direction){var e="down"===t.direction?"out":"in";i.animate.forEach(function(t){var n=i.position[t.position];if(n&&"function"==typeof n[e])n[e](t.element,t.slide)})}},init:function(t){if(i.animate.push(t),!i.inited)i.bindScrollEvent()},bindScrollEvent:function(){function t(){if(r=e.getScrollTop(),a=e.getScrollHeight(),r+window.innerHeight>=a){if("down"!==n)n="down",i.onscroll({direction:"down"})}else if(r>0){if(c<r)o=1;else if(c>r)o=-1;var t=null;if("down"!==n&&1===o)n="down",t="down";else if("up"!==n&&-1===o)n="up",t="up";i.onscroll({direction:t})}else if(0===r)if("up"!==n)n="up",i.onscroll({direction:"up"});c=r}var n=null,o=0,r=e.getScrollTop(),a=e.getScrollHeight(),c=0;i.inited=!0,window.addEventListener("touchstart",function(t){r=e.getScrollTop(),a=e.getScrollHeight()}),window.addEventListener("touchmove",t),window.addEventListener("touchend",t),e.on("scroll",function(e){if(i.first)return void(i.first=!1);t()})},position:{top:{in:function(t,e){t.classList.remove(e||"mip-fixed-hide-top")},out:function(t,e){t.classList.add(e||"mip-fixed-hide-top")}},bottom:{in:function(t,e){t.classList.remove(e||"mip-fixed-hide-bottom")},out:function(t,e){t.classList.add(e||"mip-fixed-hide-bottom")}}}};return i}),define("mip-fixed/mip-fixed",["require","customElement","util","./viewport-scroll"],function(t){function e(){var t=this;t.addEventAction("close",function(e){e.preventDefault(),n.css(t.element,"display","none")});var e=t.element.getAttribute("type");if(t.element.hasAttribute("data-slide")&&("top"===e||"bottom"===e))o.init({element:t.element,position:e,slide:t.element.getAttribute("data-slide")})}var i=t("customElement").create(),n=t("util"),o=t("./viewport-scroll");return i.prototype.build=e,i}),define("mip-fixed",["mip-fixed/mip-fixed"],function(t){return t}),function(){function t(t,e){t.registerMipElement("mip-fixed",e,"mip-fixed{position:fixed !important}mip-fixed[data-slide]{-webkit-transition:transform .5s;transition:transform .5s}mip-fixed[data-slide].mip-fixed-hide-top{-webkit-transform:translate3d(0, -200%, 0);transform:translate3d(0, -200%, 0)}mip-fixed[data-slide].mip-fixed-hide-bottom{-webkit-transform:translate3d(0, 200%, 0);transform:translate3d(0, 200%, 0)}")}if(window.MIP)require(["mip-fixed"],function(e){t(window.MIP,e)});else require(["mip","mip-fixed"],t)}()}});

示例

顶部悬浮


<mip-fixed type="top">
    自定义内容,可以嵌套其他组件
</mip-fixed>

顶部悬浮 - 向下滑动隐藏


<mip-fixed type="top" data-slide>
    顶部悬浮 - 向下滑动隐藏
</mip-fixed>

顶部悬浮 - 自动隐藏距离


<!-- 以下代码只是示例 --><style>
    /*元素顶部距离*/
    .mip-fixed-top {        top: 300px !important;
    }    /*自定义元素隐藏时动画*/
    .mip-fixed-test-top {        -webkit-transform: translate3d(0, -400px, 0);                transform: translate3d(0, -400px, 0);
    }</style><mip-fixed type="top" data-slide="mip-fixed-test-top" class="mip-fixed-top">
    顶部悬浮 - 自动隐藏距离</mip-fixed>

底部悬浮


<mip-fixed type="bottom">
    自定义内容,可以嵌套其他组件
</mip-fixed>

左边悬浮

规则:属性 bottom 或 top 必须有一个


<mip-fixed type="left" bottom="50px">
    自定义内容,可以嵌套其他组件
</mip-fixed>

右边悬浮

规则:属性 bottom 或 top 必须有一个


<mip-fixed type="right" top="50px">
    自定义内容,可以嵌套其他组件
</mip-fixed>

支持 <mip-gototop>


<mip-fixed type="gototop">
    <mip-gototop></mip-gototop></mip-fixed>

关闭悬浮元素的方法

  1. 给 <mip-fixed> 标签添加一个自定义的 id=customid

  2. 给需要点击关闭悬浮元素的标签添加属性 on="tap:customid.close"


<mip-fixed type="top" id="customid">
  <div>我是顶部的fixed</div>
  <div  class="btn_style" on="tap:customid.close">我是关闭按钮</div>
</mip-fixed>

属性

type

说明:悬浮类型
必选项:是
类型:字符串
取值范围:top/bottom/right/left

top

说明:距离屏幕顶部距离
必选项: 否
类型:字符串
取值范围:数值+单位,例如:50(px|em|rem|vh|vw|vmin|vmax|cm|mm|q|in|pc|pt)
默认值:auto

bottom

说明:距离屏幕底部距离
必选项: 否
取值范围:数值+单位,例如:50(px|em|rem|vh|vw|vmin|vmax|cm|mm|q|in|pc|pt)
默认值:auto

data-slide

说明:屏幕向下滑动时元素添加 class 名称去隐藏元素,元素已经添加 transition: transform .5s ,只需要向对应的类添加 transform 即可,只支持 type="top" 和 type="bottom"
必须项:否
默认值:type="top" 时默认取值 mip-fixed-hide-toptranslate3d(0, -200%, 0)) ,type="bottom" 时默认取值 mip-fixed-hide-bottomtranslate3d(0, 200%, 0)

注意事项

悬浮类型

  • type 为 topbottom 类别不需要添加属性:top/bottom

  • type 为 leftright 类别需要至少添加一个 top/bottom 属性,优先用 bottom

  • type 为 gototop 类别不需要任何属性。


少客联盟- 版权声明 1、本主题所有言论和图片纯属会员个人意见,与少客联盟立场无关。
2、本站所有主题由该帖子作者发表,该帖子作者admin少客联盟享有帖子相关版权。
3、少客联盟管理员和版主有权不事先通知发贴者而删除本文。
4、其他单位或个人使用、转载或引用本文时必须同时征得该帖子作者admin少客联盟的同意。
5、帖子作者须承担一切因本文发表而直接或间接导致的民事或刑事法律责任。
6、本帖部分内容转载自其它媒体,但并不代表本站赞同其观点和对其真实性负责。
7、如本帖侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意。
8、官方反馈邮箱:chinasuc@chinasuc.cn


上一篇:怎样修改网络端口?
下一篇:HTTPS改造的必要性
Whatever is worth doing is worth doing well. juvenile hacker league
最新回复 (0)
    • 少客联盟
      2
        登录 注册 QQ登录(停用)
返回