瀑布流式页面布局_微信小程序——实现简单的瀑布流式布局
文章图片
写页面时，考虑到美观，良好的用户体验，对于内容的展示我们经常会用到瀑布流式布局，那么如何实现一个简单的瀑布流呢？
文章图片
瀑布流式布局 原理：遍历数组判断奇偶性，然后分左右排布，左右两边代码基本一致
直接上代码：
【瀑布流式页面布局_微信小程序——实现简单的瀑布流式布局】index.wxml
//index.wxml
index.wxss
//index.wxss/* 推荐&精选 */.activity_recommend{
margin-top:10px;
padding-top:5px;
margin-left: 25rpx;
margin-right:25rpx;
position: relative;
}.recommend_content{
clear:both;
overflow: hidden;
width:100%;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}.recommend_content:after {
content: "";
width: 336rpx;
}.recommend_item{
display: inline-block;
background:#fff;
margin-bottom: 20rpx;
border-radius: 12rpx;
width:336rpx;
min-height: 390rpx;
max-height: 590rpx;
position: relative;
box-shadow: 0 4px 10px 0 rgba(0,0,0,0.10);
//阴影效果
}.item-img_container{
width:336rpx ;
border-radius: 12rpx 12rpx 0 0 ;
}.item-img_container .item-img{
width:336rpx;
min-height: 190rpx;
max-height: 380rpx;
border-radius: 12rpx 12rpx 0 0 ;
}
.item-img_video{
width:336rpx;
min-height: 190rpx;
max-height: 380rpx;
border-radius: 12rpx 12rpx 0 0 ;
}
index.js(可忽略）
//index.js // 获取formId
submitInfo(e) {
this.setData({
formId: e.detail.formId,
},
(res) => {})
},
//获取点击项的formId以此查询数据对其操作
也引用将上述代码，写入组件使用，可参考
ajing741472797/pbl?github.com
文章图片
end
推荐阅读
- Web前端-布局|瀑布流图片布局
- H5移动端页面加入canvas可滑动代码条件下android手机点击input重复弹出键盘
- 如何在信息图表中转换Facebook页面报告（）
- ASP.Net页面生命周期与Page_Load方法的工作原理介绍
- appium微信公众号H5页面自动化测试
- 网络正常Win7系统页面提示处于脱机状态的处理办法
- app之模拟登陆页面的实现
- Android Studio [RecyclerView/瀑布流显示]
- 微信页面版怎样语音聊天？微信页面版语音聊天办法_微信
- Win10更新激活页面闪退 无法激活怎样办?