这项目中运用了layui这个css框架,在使用组件弹出相册时,遇到一个问题,按照官网文档,返回的json数据格式也是按照官网来的,但是不显示图片,这里有一个坑,如果你是吧官网例子粘贴过来修改如下:
$.getJSON('/jquery/layer/test/photos.json', function(json){
layer.photos({
photos: json
,anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数)
});
});
后台返回json的数据类似这样的:
{
"title": "", //相册标题
"id": 123, //相册id
"start": 0, //初始显示的图片序号,默认0
"data": [ //相册包含的图片,数组格式
{
"alt": "图片名",
"pid": 666, //图片id
"src": "http://resources/imgs/1524563654856j42A.jpg", //原图地址
"thumb": "" //缩略图地址
}
]
}
可能不报错,但是没反应,这是为什么呢。原因是:json文件中的注释要去掉,去掉,去掉,然后奇迹就出现了
注意点二:就是photos: json(这里json是返回的数据实体,结构就上上面的,如果后台返回的是不是上面的路径就要注意了)
这里要注意返回数据json的层级关系,相册id,title,start等必须和data这个包含图片的层级一样
好比返回的数据结构是下面这样:
{
status:1,
msg:success,
data:{
"title": "", //相册标题
"id": 123, //相册id
"start": 0, //初始显示的图片序号,默认0
"data": [ //相册包含的图片,数组格式
{
"alt": "图片名",
"pid": 666, //图片id
"src": "http://resources/imgs/1524563654856j42A.jpg", //原图地址
"thumb": "" //缩略图地址
}
]
}
}
这里就需吧返回的路径改为:photos: json.data