瀑布流式页面布局_微信小程序——实现简单的瀑布流式布局

写页面时，考虑到美观，良好的用户体验，对于内容的展示我们经常会用到瀑布流式布局，那么如何实现一个简单的瀑布流呢？

瀑布流式布局

原理：遍历数组判断奇偶性，然后分左右排布，左右两边代码基本一致

直接上代码：

index.wxml

  //index.wxml<!-- 推荐&精选 --><view class="activity_recommend" wx:if="{{activeIndex == 0}}"><form bindsubmit="submitInfo" report-submit='true' wx:if="{{recommendListArr.length != 0}}"> <!-- form标签包裹以获取formId --><view class="recommend_content"><!-- 瀑布流左边 --><view class="left"><view wx:for="{{recommendListArr}}" wx:for-item="item" wx:key="item.activityid"><view name="m-recommend" class="recommend_item" wx:if="{{index%2==0}}"><button class="item-img_container" wx:if="{{item.isvideo == '0'}}" id="{{item.activityid}}"formType="submit" hover-class="none" bindtap="gotoLinks"><image class="item-img" src="{{imgUrl}}{{item.activityimg}}" mode="widthFix"></image></button><!-- 判断：当内容为视频时展示视频样式 --><image class="item-img_video" id="{{item.activityid}}" wx:if="{{item.isvideo == '1'}}"src="{{item.activityimg}}" mode="widthFix" bindtap="showVideo"></image><image class="playImg" wx:if="{{item.isvideo == '1'}}" src="../../images/recommend_play.png"bindtap="showVideo" mode="widthFix"></image><!-- 判断：当内容为图片时展示图片样式 --><view url="url" class="recommend_shopName">{{item.activityname}}</view><view class="recommend_shopper"><view class="shopper_container" id="{{item.storeid}}" bindtap="gotoStore"><image class="shopper_ava" src="{{item.headlogo}}"></image><text class="shopperName">{{item.nickname}}</text></view><view><button class="lovestatusBtn_on" form-type="submit" id="{{item.storeid}}"hidden="{{item.islike =='0'}}" bindtap="liketags"></button><button class="lovestatusBtn_no" form-type="submit" id="{{item.storeid}}"hidden="{{item.islike == '1'}}" bindtap="liketags"></button></view></view></view></view></view><!-- 瀑布流右边 --><view class="right"><view wx:for="{{recommendListArr}}" wx:for-item="item" wx:key="item.activityid"><view name="m-recommend" class="recommend_item" wx:if="{{index%2==1}}"><button class="item-img_container" wx:if="{{item.isvideo == '0'}}" id="{{item.activityid}}"formType="submit" hover-class="none" bindtap="gotoLinks"><image class="item-img" src="{{imgUrl}}{{item.activityimg}}" mode="widthFix"></image></button><image class="item-img_video" id="{{item.activityid}}" wx:if="{{item.isvideo == '1'}}"src="{{item.activityimg}}" mode="widthFix" bindtap="showVideo"></image><image class="playImg" wx:if="{{item.isvideo == '1'}}" src="../../images/recommend_play.png"bindtap="showVideo" mode="widthFix"></image><view url="url" class="recommend_shopName">{{item.activityname}}</view><view class="recommend_shopper"><view class="shopper_container" id="{{item.storeid}}" bindtap="gotoStore"><image class="shopper_ava" src="{{item.headlogo}}"></image><text class="shopperName">{{item.nickname}}</text></view><view><button class="lovestatusBtn_on" form-type="submit" id="{{item.storeid}}"hidden="{{item.islike =='0'}}" bindtap="liketags"></button><button class="lovestatusBtn_no" form-type="submit" id="{{item.storeid}}"hidden="{{item.islike == '1'}}" bindtap="liketags"></button></view></view></view></view></view></view></form></view>

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// 获取formIdsubmitInfo(e) {this.setData({formId: e.detail.formId,},(res) => {})},
//获取点击项的formId以此查询数据对其操作

也引用将上述代码，写入组件使用，可参考

ajing741472797/pblgithub.com

end

瀑布流式页面布局_微信小程序——实现简单的瀑布流式布局相关推荐

vue用公共组件页面传值_微信小程序页面传值、组件间通信总结
小程序是一种新的开放能力,开发者可以快速地开发一个小程序.小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验.对于微信小程序,前端开发应该不陌生,目前也是非常火,很多公司都会进行开发.对 ...
小程序内嵌h5页面分享_微信小程序webview内页面分享
因为项目原因,之前在微信小程序内部使用 webview 嵌套了 h5 页面,现在要添加一个新的功能,用户在哪个页面进行了分享,被分享的用户从链接进来就跳转到哪个分享页面. 先了解一下 web-view ...
微信小程序页面栈_微信小程序使用页面栈改变上一页面的数据
微信小程序中如果从一个页面中进入下一个页面,如果下个页面的数据有删除或者增加再返回上一个页面的时候,就会导致页面不刷新(数据加载函数在onload中),从而造成数据不一致的情况.其实在微信小程序中是可 ...
微信小程序页面栈_微信小程序之页面传值(路由、页面栈、globalData、缓存)
1. 通过url带参数传递 1.1 固定参数传递例如,从 list 页面到 detail 页面, 传递一个或多个固定值 list页面传值: 点此进入 detail detail页面取值: onLoa ...
微信小程序页面栈_微信小程序开发中的页面栈及页面路由原理
摘要:小程序的开发方兴未艾,本文以图解的形式详细剖析了小程序开发中的页面栈及页面路由原理,对于该原理的深入理解有助于开发者更好地理解小程序的开发框架,更好地开发出功能强大的小程序. 微信小程序(以下简 ...
微信小程序实现简单的瀑布流式布局
参考原文:https://blog.csdn.net/weixin_39661129/article/details/110935903 实现样式: 分析:应为小程序只有左右两列,完全没有H5动态计算 ...
微信小程序中如何制作瀑布流效果
微信小程序中如何制作瀑布流效果如图是首先,页面布局,页面分为两个部分,左右各一部分,各自插入图片,页面代码如下: <view class="city_history"> ...
微信小程序点击带id参数跳转_微信小程序页面跳转方法和携带参数详解
1.页面跳转方式 (1)标签跳转 open-type的属性值对应api里的用法即wx.的用法 1 跳转到新页面 (2)wx.navigateTo 方法跳转此方法能够从跳转的页面会回到当前页面 1 w ...
黑马优购_微信小程序
黑马优购_微信小程序项目介绍 2021年5月6日-2021年5月12日在校参加微信小程序培训,由黑马讲师授课,能够利用微信提供的组件和API实现轮播图.授权用户信息.上拉加载更多等功能,由于之前对u ...

瀑布流式页面布局_微信小程序——实现简单的瀑布流式布局

瀑布流式页面布局_微信小程序——实现简单的瀑布流式布局相关推荐

最新文章

热门文章