微信小程序列表页样式布局之一行2个图片列表制作教程

今天给大家带来微信小程序列表页样式布局之一行2个图片列表制作教程，主要适合图片列表，制作以后效果图如下：

一、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>

二、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;
}

三、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(){
    // 页面关闭
  }
})

模板简介：该模板名称为【微信小程序列表页样式布局之一行2个图片列表制作教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。