mip-anim动图详解 mip-anim动图怎么用
标题 | 内容 |
类型 | 通用 |
支持布局 | responsive, fixed-height, fixed, container 文档 |
所需脚本 | https://mipcache.bdstatic.com/static/v1/mip-anim/mip-anim.js |
示例
带placeholder的加载方式
<mip-anim
layout="fixed" width=210 height=210 src="xxx" alt="an animation">
<mip-img
layout="fixed-height" width=210 height=210 src="xxxx">
</mip-img>
</mip-anim>
只有gif图
<mip-anim
layout="fixed" width=210 height=210 src="xxx"alt="an animation">
</mip-anim>
属性
src
说明:图片路径
必选项:是
类型:字符串
取值范围:URL
本次一聚焦成为大家带来的是mip-accordion 折叠节点详解,mip-accordion 用来支持在 mip折叠隐藏的节点(可记录用户上次行为),下面请看详细的介绍。
标题 | 内容 |
类型 | 通用 |
支持布局 | responsive,fixed-height,fill,container,fixed 文档 |
所需脚本 | https://mipcache.bdstatic.com/static/v1/mip-accordion/mip-accordion.js |
示例
标题加内容形式
<mip-accordionsessions-key="mip_1">
<section>
<h4>下拉第一个</h4>
<p>我说你是人间的四月天;笑声点亮了四面风;轻灵在春的光艳中交舞着变。你是四月早天里的云烟,黄昏吹着风的软,星子在无意中闪,</p>
</section>
<section>
<h4>下拉第二个</h4>
<p>细雨点洒在花前。那轻,那娉婷,你是,鲜妍百花的冠冕你戴着,你是天真,庄严,你是夜夜的月圆。</p>
</section>
<section>
<h4>下拉第三个</h4>
<mip-img layout="responsive"width="400"height="200"src="http://filesimg.111cn.net/2016/12/17/20161217131228631.jpg">
</mip-img>
</section>
</mip-accordion>
标题加内容形式-手动
默认展开的节点此时要加 expanded 属性
<mip-accordion sessions-key="mip_1"type="manual">
<section>
<h4>下拉第一个</h4>
<p>我说你是人间的四月天;笑声点亮了四面风;轻灵在春的光艳中交舞着变。你是四月早天里的云烟,黄昏吹着风的软,星子在无意中闪,</p>
</section>
<section expanded>
<h4>下拉第二个</h4>
<p>细雨点洒在花前。那轻,那娉婷,你是,鲜妍百花的冠冕你戴着,你是天真,庄严,你是夜夜的月圆。</p>
</section>
<section>
<h4>下拉第三个</h4>
<mip-imglayout="responsive"width="400"height="200"
src="http://filesimg.111cn.net/2016/12/17/20161217131228631.jpg">
</mip-img>
</section>
</mip-accordion>
标题切换形式
<mip-accordion sessions-key="mip_2">
<section>
<h4>
<spanclass="show-more">显示更多</span>
<spanclass="show-less">收起</span>
</h4>
<p>显示显示收起收起显示显示收起收起显示显示收起收起显示显示收起收起</p>
</section>
</mip-accordion>
属性
sessions-key
说明:组件唯一标识符,用于区分同个页面中多个mip-accordion以还原用户上次操作
必选项:是
类型:字符串
type
说明:类型,区分自动根据session记录展开节点(automatic),还是手动配置默认展开节点(manual)
必选项:否
类型:字符串
单位:无
取值:automatic, manual
默认值:automatic
expanded
说明:默认展开的 mip-accordion 子节点需要配置此属性,只有在 mip-accordion 的 type 属性值为 manual 时才会生效
必选项:否
类型:字符串
单位:无
取值:无
默认值:无
mip-video视频是什么,mip-video 用来支持在 mip 中增加视频内容,是HTML <video>的直接包装。 功能与兼容性与HTML5相关文章
- 在昨天的《Javascript权威指南》学习笔记之十:ECMAScript 5 增强的对象模型一文中,对于一段代码的调试出现了一个奇怪现象,现将源代码贴在下面: 复制代码 代码如下: <script type="text/javascript"> function Person(){}...2014-05-31
- 这篇文章主要介绍了vue-cli设置publicPath小记,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-04-14
- 复制代码 代码如下: //element:需要添加新样式的元素,value:新的样式 function addClass(element, value ){ if (!element.className){ element.className = value; }else { newClassName = element.className; newClas...2014-05-31
- 在javascritp中,不一定只有对象方法的上下文中才有this, 全局函数调用和其他的几种不同的上下文中也有this指代。 它可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式。JavaScript 中函数的调用有以下...2015-03-15
- 事件触发器从字面意思上可以很好的理解,就是用来触发事件的,但是有些没有用过的朋友可能就会迷惑了,事件不是通常都由用户在页面上的实际操作来触发的吗?这个观点不完全正确,因为有些事件必须由程序来实现,如自定义事件,jQue...2014-06-07
- 有一道js面试题,题目是这样的:下列代码的执行结果是什么,为什么? 复制代码 代码如下: var i, j, k; for (i=0, j=0; i<10, j<6; i++, j++) { k = i+j; } document.write(k); 答案是显示10,这道题主要考察JavaScript的逗...2015-03-15
- 通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。 HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。 HTML DOM 模型被构造为对象的树: 通过可编程的对象模型,Java...2015-10-23
- 1、ActiveX向Javascript传参 复制代码 代码如下: <script language="javascript" for="objectname" event="fun1(arg)"> fun2(arg); </script> objectname为ActiveX控件名,通过<object>标签里的id属性设定,如下; 复制...2014-06-07
- 这篇文章主要介绍了vue cli4.0项目引入typescript的方法,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-17
- Window有navigator对象让我们得知浏览器的全部信息.我们可以利用一系列的API函数得知浏览器的信息.JavaScript代码如下:function message(){ txt = "<p>浏览器代码名: " + navigator.appCodeName + "</p>";txt+= "<p>...2015-11-24
- 虽然ES6都还没真正发布,但已经有用ES6重写的程序了,各种关于ES789的提议已经开始了,这你敢信。潮流不是我等大众所能追赶的。潮流虽然太快,但我们不停下学习的步伐,就不会被潮流丢下的,下面来领略下ES6中新特性,一堵新生代JS...2015-11-24
- ---恢复内容开始---1.location.href.....(1)self.loction.href="http://www.cnblogs.com/url" window.location.href="http://www.cnblogs.com/url" 以上两个用法相同均为在当前页面打开URL页面 (2)this.locati...2015-10-30
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
前言在面向对象的编程范式中,封装都是必不可少的一个概念,而在诸如 Java,C++等传统的面向对象的语言中, 私有成员是实现封装的一个重要途径。但在 JavaScript 中,确没有在语法特性上对私有成员提供支持, 这也使得开发人员使...2015-10-30- tab切换在网页中很常见,故最近总结了4种实现方法。 首先,写出tab的框架,加上最简单的样式,代码如下: <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style> *{ pa...2015-11-08
- 这篇文章主要介绍了浅谈vue2的$refs在vue3组合式API中的替代方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
- 这篇文章主要介绍了WebStorm无法正确识别Vue3组合式API的解决方案,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下...2021-02-18
- 生生把写过的java版改成javascript版,第一次写,很不专业,见谅。唉,我是有多闲。复制代码 代码如下: var Sudoku = { init: function (str) { this.blank = []; this.fixed = []; this.cell =...2015-03-15
javascript中的document.open()方法使用介绍
document.open()方法打开一个新的文档,并用document.write()方法编写文档的内容,然后用document.close()方法关闭文档操作,使其内容显示出来。 例如: 复制代码 代码如下: <script type="text/javascript"> window.onloa...2013-10-13javascript中slice(),splice(),split(),substring(),substr()使用方法
1.slice();Array和String对象都有在Array中 slice(i,[j])i为开始截取的索引值,负数代表从末尾算起的索引值,-1为倒数第一个元素 j为结束的索引值,缺省时则获取从i到末尾的所有元素参数返回: 返回索引值从i到j的数组,原数组...2015-03-15vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
这篇文章主要介绍了vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下...2021-02-20