微信小程序中一行2个图片排版源码详解

文章目录

效果图
一、wxml页面代码如下：
二、wxss样式代码如下：
三. js数据代码

效果图

一、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个图片排版源码详解相关推荐

《微信小程序-进阶篇》Lin-ui组件库源码分析-列表组件List（一）
大家好,这是小程序系列的第二十篇文章,在这一个阶段,我们的目标是由简单入手,逐渐的可以较为深入的了解组件化开发,从本文开始,将记录分享lin-ui的源码分析,期望通过对lin-ui源码的学习能加深组 ...
python 自动化微信小程序_干货 | 微信小程序自动化测试最佳实践（附 Python 源码）...
原标题:干货 | 微信小程序自动化测试最佳实践(附 Python 源码) 本文为霍格沃兹测试学院测试大咖公开课<微信小程序自动化测试>图文整理精华版. 随着微信小程序的功能和生态日益完善, ...
基于微信小程序的springboot客运汽车票购票系统源码和论文
在客运公司工作 7 年之余,对客运管理的难度深有感触.特别是在春运期间购票难依旧是长途汽车订票的一大难题.长途汽车和火车的订票管理虽然有差异,但大体上是相同的.长途汽车在售票的过程中需要对旅客的起 ...
微信小程序之授权登录（附完整源码）
个人博客上已经同步更新了文章,有目录索引,阅读起来比较方便,欢迎大家移步个人博客上读阅~ 个人博客地址:http://zwd596257180.gitee.io/blog/2019/04/15/wec ...
微信小程序：云开发表情包制作源码
该款小程序是一个表情包制作内容毕竟丰富,另外自定义制作方面也是特别的自由支持自主上传图片,自定义文章,另外拥有多种素材模板以供选择这是一款云开发的小程序,但是安装还是挺简单的搭建教程: 首先使 ...
微信小程序：笑话与趣图框架源码下载
这是一款以笑话和趣味图为主的一款微信小程序源码或者也可以说是一个框架吧里面的内容是内置在小程序里面的,所以说是一款框架也可以因为内置的内容,所以内容数量有限! 大家可以用来养账号,或者有能力的二 ...
在c 语言里如何制作滑动图片大小,[教程]教你在微信小程序中实现手势缩放图片...
在小程序中,image 组件的 mode 有 12 种,其中只有三种是缩放模式.而在这三种之中,只有 aspectFit 模式可以等比例缩放图片,并显示完整的图片.此模式是保证图片长边完整地显示出来, ...
微信小程序中base64转换成图片；uni-app小程序base64转图片；微信小程序base64文件转图片；微信小程序base64图片转图片
将微信小程序的图片转成base64 点击此链接看另一篇以下是将后端返回的base64转成图片: 方法1:使用微信小程序自带方法 //把base64转换成图片getBase64ImageUrl: (b ...
微信小程序中base64转换成图片
//把base64转换成图片getBase64ImageUrl: function(data) {/// 获取到base64Datavar base64Data = data;/// 通过微信小程序自 ...

微信小程序中一行2个图片排版源码详解

文章目录

效果图

一、wxml页面代码如下：

二、wxss样式代码如下：

三. js数据代码

微信小程序中一行2个图片排版源码详解相关推荐

最新文章

热门文章