微信小程序-瀑布流商品展示

最新推荐文章于 2024-09-23 22:03:58 发布

沐鐸丶

最新推荐文章于 2024-09-23 22:03:58 发布

阅读量3.5k

点赞数

分类专栏：日记文章标签：小程序

本文链接：https://blog.csdn.net/ahlb_hl/article/details/109046712

版权

本文记录了在微信小程序中创建瀑布流商品展示页面的过程。通过计算图片高度动态填充列表，解决数据加载问题，利用wx:if重新渲染视图。文章包含WXML、JS和WXSS关键代码片段。

摘要由CSDN通过智能技术生成

最近在做一组微信小程序瀑布流展示商品的页面，正好记录一下备用。

商品列表根据图片高度依次展示，通过计算图片高度决定数据填充哪个列表，下面贴代码

WXML：

<!--商品列表展示-->

<view style="display:none" wx:if="{
  {isShow}}">
		<image wx:for="{
  {wxProductList}}" wx:key="id" id="{
  {item.wxProductId}}" src="{
  {item.wx_original}}" bindload="onImageLoad" ></image>
</view>
<scroll-view scroll-y="true" style="height:{
  {scrollH}}px;" wx:if="{
  {isShow}}">
		<view style="width:100%;" style="margin-bottom:10px">
		 
			<view class="img_item">
				<view wx:for="{
  {col1}}" wx:key="id" >
						<image src="{
  {item.wx_original}}" style="width:100%;height:{
  {item.height}}px" bindtap="goDetail" data-pid="{
  {item.wx_productId}}" data-addrid="{
  {wxMemberDefaultAddr.wx_agentAddressId}}"></image>
						<view class="w-name font-w-b font-13">{
  {item.wx_productName}}</view>
						<view class="w-name font-10">{
  {item.