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

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

小程序 - 图片左右列表展示相关推荐

【一步步学小程序】2.列表展示
我们上一节已经创建了一个可以点击切换的tabbar.这节我们开始正式敲代码,在首页上展示一个可以上下滚动的课程列表: 首先打开上一节的pages/home/homeMain/homeMain.wxml ...
微信小程序新闻信息列表展示
微信小程序信息展示列表 wxml  <view class='haibao' bindtap="seeDetail" id="{ ...
微信小程序图片高度固定,width:auto,图片不展示
微信小程序图片高度固定,width:auto,图片不展示解决办法 image标签设置width:auto 设置mode属性mode=heightFix 高度固定,宽度不固定小程序版本 2.10.3 ...
微信小程序开发(4) 企业展示
在这篇微信小程序开发教程中,我们将介绍如何使用微信小程序开发企业内部宣传展示等功能. 一.小程序主体部分一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下: 1. 小程序逻辑 App({o ...
微信小程序图片放大预览效果的实现
效果预览效果图有点快,但是可以大致看出来效果了.我再给大家描述下吧一个页面有3张图片,点击其中任意一张都可以放大预览.然后在预览的时候,左右滑动,还可以看另外两张图片. 话不多说,直接上代码 1, ...
uni-app微信小程序image引入图片；background-image背景图引入图片；小程序预览本地图片；小程序图片过大引入报错；获取本地图片的网络地址；
uni-app小程序图片使用有image标签和background-image背景图两种方式: 下有获取本地图片的网络地址方式:见第四步一.方式一:使用image标签引入: uni-app官方ima ...
小程序图片上传php后台,微信小程序图片选择、上传到服务器、预览（PHP）实现实例...
微信小程序图片选择.上传到服务器.预览(php)实现实例小程序实现选择图片.预览图片.上传到开发者服务器上后台使用的tp3.2 图片上传请求时候的header参考时可以去掉(个人后台验证权限使用 ...
基于微信小程序的用户列表点赞功能
代码地址如下: http://www.demodashi.com/demo/13997.html 一.前言 (1).适合人群 1.微信小程序开发者 2.前端工程师 3.想入门学习小程序开发的人员 4. ...
php 点击选择图片上传,微信小程序图片选择、上传到服务器、预览（PHP）实现实例...
微信小程序图片选择.上传到服务器.预览(PHP)实现实例小程序实现选择图片.预览图片.上传到开发者服务器上后台使用的tp3.2 图片上传请求时候的header参考时可以去掉(个人后台验证权限使用 ...

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

小程序 - 图片左右列表展示相关推荐

最新文章

热门文章