Q-album NPM | npm.io

album

木桶排列的相册

兼容性

兼容性 IE9+

npm

npm install q-album --save

用法

let myAlbum = new Album(Element[,options]);

操作数据API （基于 Array 的原生方法，参数全部相同，用法全部相同）

api.concat();
api.push();
api.pop();
api.revers();
api.shift();
api.unshift();
api.sort();
api.splice();

强制刷新一次视图

api.refresh();

替换原数据

会自动刷新视图
api.data = newData;

options

名	类型	是否可断点设置	默认值	作用
data	Array	false	Array	存放数据
responsive	boolean/object	false	false	响应式断点设置
height	number	true	100	图片的高度
space	number	true	5	上下左右间距
maxLines	number	true	auto	限制行数
resizeRefreshDelay	ms	false	100	防止大量刷新，屏幕尺寸改变刷新的延迟
onInit	function	false	null	初始化后的回调函数
onRefreshBefore	function	false	null	更新视图前的回调函数
onRefreshAfter	function	false	null	更新视图后的回调函数
create	function	false	见下	元素的构造函数

data 数组结构

// 数据格式 ， src width height 必须要有，剩余按照需要自行添加
const FORMATDATA = [
  {src:'url',width:'number',height:'number'},
  {src:'url',width:'number',height:'number'},
  {src:'url',width:'number',height:'number'},
];

create 默认函数

注意：这三个自定义标签是必须要有父子级关系也不要改变！你可以根据需要增加新的标签元素自定义标签会根据是否有 href 属性转换成 div 或者 a

create: function(dataItem,album){
 return `<album-item>
           <album-content>
             <album-pic></album-pic>
           </album-content>
         </album-item>`;
},

@everything-registry/sub-chunk-2500 @infinitebrahmanuniverse/nolb-q-

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago