0、效果
1、wxml代码
<view class="schoollist">
<block wx:for="{{items}}" wx:key="item">
<view class="school-list">
<navigator url="/pages/photo/photo?id={{item.id}}">
<view class="school-list-info" index="{{index}}">
<image class="school-list-photo" src="{{item.imageUrl}}"/>
<text class="school-list-desc">{{item.content}}</text>
</view>
</navigator>
</view>
</block>
</view>
2、wxss代码
.schoollist-head-img{
width: 100%;
height: 180rpx;
padding: 20rpx;
box-sizing: border-box;
}
.schoollist{
margin-top: 20rpx;
}
.school-list-info{
float: left;
margin-left: 20rpx;
margin-top: 20rpx;
position: relative;
}
.school-list-photo{
width: 350rpx;
height: 250rpx;
}
.school-list-desc{
display: block;
background-color: #000;
color: #fff;
position: absolute;
bottom: 3%;
left: 0;
width: 94%;
text-align: center;
font-size: 25rpx;
padding: 10rpx;
opacity: 0.7;
}
3、js代码
// pages/fengguang/fengguang.js
Page({
data:{
"items": [
{
"id": "1",
"imageUrl": "http://xl.tianjiaoedu.org/upload/201607/05/201607051554541730.jpg",
"content": "南昌校区图书馆"
},
{
"id": "2",
"imageUrl": "http://202.101.244.180/ecitweb2007/news2007/uploadfile/newsimg/125-1.jpg",
"content": "抚州校区的西湖"
},
{
"id": "3",
"imageUrl": "http://xinwen.jgaoxiao.com/Uploads/news/Attach/526dfcc7bcc14.jpg",
"content": "新生军训"
},
{
"id": "4",
"imageUrl": "http://img2.ph.126.net/NjHvTMhbCihDSocfwxE11g==/2855563638830365544.jpg",
"content": "樱花广场"
},
{
"id": "5",
"imageUrl": "http://202.101.244.180/ecitweb2007/news2007/uploadfile/newsimg/165-2.jpg",
"content": "校园雪景"
},
{
"id": "6",
"imageUrl": "http://i1.sinaimg.cn/travel/2014/1021/U8842P704DT20141021103442_1.jpg",
"content": "校园风光"
},
{
"id": "7",
"imageUrl": "http://202.101.244.180/ecitweb2007/news2007/uploadfile/newsimg/1651-4.jpg",
"content": "抚州校区夜景"
},
{
"id": "8",
"imageUrl": "http://upload.ct.youth.cn/2013/0707/1373173834482.jpg",
"content": "三下乡活动"
},
{
"id": "9",
"imageUrl": "http://202.101.244.180/ecitweb2007/news2007/uploadfile/newstxt/20160525091829491.jpg",
"content": "文艺晚会"
},
{
"id": "10",
"imageUrl": "http://202.101.244.180/ecitweb2007/news2007/uploadfile/newstxt/20151215190012388.jpg",
"content": "广播操比赛"
},
{
"id": "11",
"imageUrl": "http://202.101.244.180/ecitweb2007/news2007/uploadfile/newstxt/20151110122039657.jpg",
"content": "校运会"
},
{
"id": "12",
"imageUrl": "http://pic.baike.soso.com/p/20130618/20130618153602-1487877646.jpg",
"content": "国防生风采"
}
]
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
}
})