小程序 - 圖片左右列表展示

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(){
    // 頁面關閉
  }
})