微信小程序实现首页图片多种排版布局!

先来个效果图:

使用技术主要是flex布局,绝对定位布局,小程序前端页面开发,以及一些样式!

直接贴代码,都有详细注释,熟悉一下,方便以后小程序开发!

wxml:

<view class='indexcontainer'><!-- 顶部推荐图片轮播 --><view class='selection'><swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"><block wx:for="{{imgUrls}}" wx:key="*this"><swiper-item> <image src="{{item}}" class="slide-image" mode='scaleToFill' /></swiper-item></block></swiper></view><!-- 第二部分--><view class='selection'><!-- 头部文字 --><view class="header"><text style='margin-left: 5px;'>英杰之诗</text><text class='all'>英雄的回忆</text></view><!-- 内容 --><view class='content'><view class='content-item' wx:for="{{contentImgUrls}}" wx:key="url" wx:for-item="item"><!-- 图片 --><image src="{{item.url}}" class="slide-image" mode='scaleToFill'/><!-- 图片上的文字说明 --><view class='content-item-title'><text>{{item.title}}</text></view></view></view></view><!-- 第三部分 --><view class='selection'><!-- 头部文字 --><view class="header"><text style='margin-left: 5px;'>神庙攻略</text><text class='all'>海拉尔历险记</text></view><!-- 内容 --> <view class='list-item' wx:for="{{HotImgUrls}}" wx:key="url" wx:for-item="item"><!-- 文章图片 --><view class='list-item-image'><image src='{{item.url}}'  class="slide-image" mode='scaleToFill'></image><!-- 作者头像 --><image src='{{item.head}}'  class="avatar" mode='scaleToFill'></image></view><!-- 文章内容 --><view class='list-item-text'><view class='list-item-text-title'><text>{{item.title}}</text></view><view class='list-item-text-context' ><text>{{item.content}}</text></view></view></view></view>
</view>

　　js:

Page({data: {//顶部轮播图imgUrls: ['https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=63967211,2305810881&fm=27&gp=0.jpg','https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3265697507,322543478&fm=27&gp=0.jpg','https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=985354164,1752304932&fm=26&gp=0.jpg'],//第二部分数据数组contentImgUrls:[{title:'塞尔达公主',url:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2716688360,1326705556&fm=27&gp=0.jpg'},{title:'卓拉公主-弥法老婆',url:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2527034280,2956682531&fm=27&gp=0.jpg'},{title:'塞尔达公主',url:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=689739696,3300191086&fm=27&gp=0.jpg'},{title:'塞尔达公主',url:'http://img4.imgtn.bdimg.com/it/u=4258802685,2724420509&fm=26&gp=0.jpg'}],//死三部分数据HotImgUrls: [{//头像地址,文字标题,文字内容,图片地址head:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1037527703,3129433808&fm=27&gp=0.jpg',title:'海拉尔平原的冒险',content: '海拉尔区是隶属内蒙古自治区呼伦贝尔市的一个市辖区，是呼伦贝尔市政治、经济、文化中心。该区位于内蒙古自治区东北部，区域范围为东经119°30′48〃— 120°35′36〃；北纬49°5′44〃—19°27′15〃，面积1440平方公里。',url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1532027772,1266945951&fm=27&gp=0.jpg'}, {head: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1037527703,3129433808&fm=27&gp=0.jpg',title: '拯救塞尔达公主吧',content: '卓拉公主-弥法老婆',url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2404695142,3634522143&fm=27&gp=0.jpg'}, {head: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1037527703,3129433808&fm=27&gp=0.jpg',title: '快速开地图塔',content: '塞尔达公主',url: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2225874892,982427892&fm=26&gp=0.jpg'}, {head: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1037527703,3129433808&fm=27&gp=0.jpg',title: '滑翔伞获得攻略',content: '塞尔达公主',url: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4216945098,3102493232&fm=26&gp=0.jpg'}],indicatorDots: true, //显示面板显示点autoplay: false,  //自动切换interval: 5000,  //切换时间duration: 1000  //动画时长},

　　css样式:

page{height: 100%;
}
.selection{border-bottom: 6px solid #ddd;
}
.indexcontainer{width: 100%;height: 100%;
}
.selection{margin-top: 10px;
}
.slide-image{width: 100%;height: 100%;
}
.header{border-left-width: 2px;border-left-style: solid;border-left-color: green;display: flex;justify-content: space-between;height: 30px;padding-left: 10rpx;padding-right: 10rpx;margin-top: 10px;margin-bottom: 10px;
}
.all{margin-right: 5px;color: green;
}
.content{display: flex;flex-wrap: wrap;justify-content: center;
}
.content-item{width: 47%;height: 280rpx;background-color: red;margin: 5px;/* 绝对定位的父级必须要定位 */position: relative;
}
.content-item-title{position: absolute; /*绝对定位,文字覆盖图片上*/color: white;bottom: 0px; /* 位置在父级元素底部 */font-size: 17px;width: 98%;height: 100rpx; /* 设置容器高度,显示渐变的高度 */text-align: center;/* 背景渐变:bottom:从下到上,右0.8向0透明渐变 */background: -webkit-linear-gradient(bottom,rgba(0,0,0,0.5),rgba(0,0,0,0));display: flex; /* flex布局,控制容器内文字元素在底部 */flex-direction: column;justify-content: flex-end;padding: 1% 1% 1% 1%;
}
.list-item{width: 100%;height: 500rpx;
}
.list-item-image{width: 100%;height: 300rpx;position: relative;
}
.list-item-text{width: 96%;height: 200rpx;}
.avatar{width: 90rpx;height: 90rpx;border-radius: 50%;position: absolute;bottom: -45rpx;right: 50rpx;
}
.list-item-text{margin-top: 10px;padding-left: 2%;padding-right: 2%;
}
.list-item-text-context{font-size: 12px;margin-top: 8px;color: #999;
}

转载于:https://www.cnblogs.com/houzheng/p/10234397.html

微信小程序实现首页图片多种排版布局!相关推荐

python相册排版_微信小程序实现首页图片多种排版布局!
先来个效果图: 使用技术主要是flex布局,绝对定位布局,小程序前端页面开发,以及一些样式! 直接贴代码,都有详细注释,熟悉一下,方便以后小程序开发! wxml: 英杰之诗英雄的回忆 {{item. ...
JAVA制作弹出小广告的程序_微信小程序实现首页弹出广告
本文实例为大家分享了微信小程序实现首页弹出广告的具体代码,供大家参考,具体内容如下这个微信小程序首页广告demo 仅供有需要的参考 .wxml this is ad //事件 catchtouchm ...
超强大的头像制作神器,支持外卖CPS等优惠劵CPS微信小程序源码支持多种流量主模式
这是一款目前小编见到的强大头像制作小程序拥有丰富的模板,多种分类基本大全支持直接获取微信头像,或者直接上传图片另外上传的话还可以支持对图片修改剪辑等多功能另外带外卖CPS,打车CPS,餐饮CP ...
小程序提交表单mysql_GitHub - kun19911227/minipro: 微信小程序提交带图片的表单
minipro 微信小程序提交带图片的表单目录说明 upload_images ├── pages │ ├── upload_info 提交表单 │ └── display_info 信息展示 ├─ ...
强大的装逼,表白,炫富,恶搞短视频制作神器微信小程序源码支持多种流量主
大家好给大家带来一款强大的微信小程序源码该源码是属于制作短视频类型的支持一键制作成各种短视频,比如装逼,表白,炫富,恶搞-..等等里面拥有各种各样的模板,和抖音一键制作视频一个道理另外里面小编 ...
微信小程序怎么实现图片按住一角缩放、旋转、拖拽
微信小程序怎么实现图片按住一角缩放.旋转.拖拽图片一角可以加个小图片,按住来操作利用movable-view.movable-area 可以实现拖拽缩放.不好旋转是不是可以利用canvas绘图 ...
为什么微信小程序里的图片在电脑上显示在手机上不显示？
<image class='carousel' src="/images/图片301@2x.png"></image> 电脑上显示图片,但手机上是空白的 & ...
关于微信小程序不能显示图片
本人场景:wxml <image> 标签设置 src="../../images/中文名.png" 时出现 IOS 端显示没问题,而安卓端不显示图片的问题. 上网一查才 ...
微信小程序：修复图片音频全新升级带特效喝酒神器源码
这是一款全新升级带特效喝酒神器小游戏微信小程序源码小编发现很多喝酒神器小程序都不带特效和音效的感觉差了那么一点意思而且感觉也不炫酷所以小编今天给大家带来一款带特效,音效炫酷的喝酒神器该款神器由 ...

微信小程序实现首页图片多种排版布局!

微信小程序实现首页图片多种排版布局!相关推荐

最新文章

热门文章