mip-fixed悬浮布局组件详解 mip-fixed悬浮布局怎么用

支持 mip 中的悬浮元素整体使用方案

标题 内容
类型 通用
支持布局 不使用布局
所需脚本 https://mipcache.bdstatic.com/static/v1/mip-fixed/mip-fixed.js

示例

顶部悬浮

规则:宽度默认屏幕100%,高度最多85像素


<mip-fixed type="top">

自定义内容,可以嵌套其他组件

</mip-fixed>

底部悬浮

规则:宽度默认屏幕100%,高度最多85像素


<mip-fixed type="bottom">

自定义内容,可以嵌套其他组件

</mip-fixed>

左侧悬浮

规则:宽度不超过屏幕10%,高度不超过屏幕25%,属性 bottom 或 top 必须有一个


<mip-fixed type="left" bottom="50px">

自定义内容,可以嵌套其他组件

</mip-fixed>

右侧悬浮

规则:宽度不超过屏幕10%,高度不超过屏幕25%,属性 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 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

注意事项

悬浮类型

type为top、bottom 类别不需要添加属性:top/bottom;

type为left、right 类别需要至少添加一个top/bottom属性,优先用 bottom。

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

fixed 元素个数限制

top <= 1

bottom <= 1

left + right <= 1

gototop <= 1

时间: 2024-10-17 16:48:20

mip-fixed悬浮布局组件详解 mip-fixed悬浮布局怎么用的相关文章

ExtJS 4.2 教程-08:布局系统详解

ExtJS 4.2 系列教程导航目录: ExtJS 4.2 教程-01:Hello ExtJS ExtJS 4.2 教程-02:bootstrap.js 工作方式 ExtJS 4.2 教程-03:使用Ext.define自定义类 ExtJS 4.2 教程-04:数据模型 ExtJS 4.2 教程-05:客户端代理(proxy) ExtJS 4.2 教程-06:服务器代理(proxy) ExtJS 4.2 教程-07:Ext.Direct ExtJS 4.2 教程-08:布局系统详解 今天我们来对

Android 五大布局方式详解_Android

Android中常用的5大布局方式有以下几种: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件. 帧布局(FrameLayout):组件从屏幕左上方布局组件. 表格布局(TableLayout):按照行列方式布局组件. 相对布局(RelativeLayout):相对其它组件的布局方式.  绝对布局(AbsoluteLayout):按照绝对坐标来布局组件.  1. 线性布局 线性布局是Android开发中最常见的一种布局方式,它是按照垂直或者水平方向来布局,通过"androi

Android ListView组件详解及示例代码_Android

Android 列表组件 ListView 列表组件是开发中经常用到组件,使用该组件在使用时需要为它提供适配器,由适配器提供来确定显示样式和显示数据. 下面看一个例子: 新建一个项目Lesson8_ListViewTest,Activity name是MainListViewTest . MainListViewTest.java的代码是: package android.basic.lesson8; import android.app.Activity; import android.os.

Android 布局学习之——Layout(布局)详解二(常见布局和布局参数)

  [Android布局学习系列]   1.Android 布局学习之--Layout(布局)详解一   2.Android 布局学习之--Layout(布局)详解二(常见布局和布局参数)   3.Android 布局学习之--LinearLayout的layout_weight属性   4.Android 布局学习之--LinearLayout属性baselineAligned的作用及baseline      Layout Parameters(布局参数):            在XML文

Masonry自动布局详解六:tableviewCell布局

Masonry自动布局详解六:tableviewCell布局 说到iOS自动布局,有很多的解决办法.有的人使用xib/storyboard自动布局,也有人使用frame来适配.对于前者,笔者并不喜欢,也不支持.对于后者,更是麻烦,到处计算高度.宽度等,千万大量代码的冗余,对维护和开发的效率都很低. 笔者在这里介绍纯代码自动布局的第三方库:Masonry.这个库使用率相当高,在全世界都有大量的开发者在使用,其star数量也是相当高的. 支持原创,请阅读原文 效果图 本节详解Masonry的以动画的

详解Android TableLayout表格布局_Android

表格布局的标签是TableLayout,TableLayout继承了LinearLayout.所以它依然是一个线性布局. 前言: 1.TableLayout简介 2.TableLayout行列数的确定 3.TableLayout可设置的属性详解 4.一个包含4个TableLayout布局的实例及效果图 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="h

Android开发之基本控件和四种布局方式详解_Android

Android中的控件的使用方式和iOS中控件的使用方式基本相同,都是事件驱动.给控件添加事件也有接口回调和委托代理的方式.今天这篇博客就总结一下Android中常用的基本控件以及布局方式.说到布局方式Android和iOS还是区别挺大的,在iOS中有Frame绝对布局和AutoLayout相对布局.而在Android中的布局方式就比较丰富了,今天博客中会介绍四种常用的布局方式.先总结一下控件,然后再搞一搞基本方式,开发环境还是用的Mac下的Android Studio.开始今天的正题, 虽然A

Android开发高仿课程表的布局实例详解_Android

先说下这个demo,这是一个模仿课程表的布局文件,虽然我是个菜鸟,但我还是想留给学习的人一些例子,先看下效果   然后再来看一下我们学校的app 布局分析 先上一张划分好了的布局图 首先整个页面放在一个LinearLayout布局下面,分为上面和下面两个部分,下面一个是显示课程表的详细信息 1:这个没什么好讲的,就是直接一个LinearLayout布局,然后将控件一个TextView用来显示年份,一个View用来当作竖线,一个Spinner用来显示选择周数 2:这个是显示星期几的部件,是我自定义

郑可详解西山居手游布局:将推单月流水过亿产品

[摘要]西山居今年会正式代理发行第一款产品<三国战神>,下半年<神魔三国志>等12个产品会亮相. 郑可详解西山居手游布局:将推 21106.html">单月流水过亿产品与大多数公司在手游上的小步快跑战略不同,自2011年10月开始涉足手游业务,西山居一直采用的是一种深耕细作的模式,整整2年之后,西山居副总裁郑可在才第一次在媒体面前介绍了目前产品进度和整体策略,他透露,西山居将兼顾代理和发行,今年将有十余款手游集中亮相.郑可介绍,过去两年时间内,西山居在手游领域的投入