微信小程序瀑布流列表

客户讲列表不好看要瀑布流，搞了半天没搞好，一行两列，总是高度高的决定一行的高度，flex解决不了

找了网上的方法。有个比较暴力的思路：整个页面左右分成两列，单列只显示一篇文章的宽度，左列显示奇数，右列显示偶数，这样模拟瀑布流。确实可行。

效果：

代码如下：

<view class='article-list'><view class="left"><block wx:for="{{list}}" wx:for-index="idx" wx:key="{{idx}}" wx:for-item="vo"><template is="item" data="{{...vo}}" wx:if="{{idx%2==0}}"></template></block></view><view class="right"><block wx:for="{{list}}" wx:for-index="idx" wx:key="{{idx}}" wx:for-item="vo"><template is="item" data="{{...vo}}" wx:if="{{idx%2==1}}"></template></block></view></view><!--  下面是一个模块 --><template name="item"><view class='item-box'  bindtap='toDetail' data-id='{{id}}'><image src='{{pic_url}}' mode='widthFix'></image><view class='item-box-title'>{{title}}</view><view class='item-box-time'><view class='item-box-time-left'>{{c_time}}</view><view class='item-box-time-right'>{{browse_num}}次浏览</view></view></view></template>

/* 流布局 */.article-list {display: flex;flex-direction: row;flex-wrap: wrap;
}.left, .right {display: inline-block;vertical-align: top;width: 50%;
}.right {float: right;
}.item-box {display: flex;flex-direction: column;justify-content: center;width: 100%;padding: 15rpx;box-shadow: #cccccc 0rpx 0rpx 5rpx;
}.item-box > image {width: 100%;vertical-align: top;
}.item-box-title{font-size: 28rpx;padding: 15rpx;
}
.item-box-time{font-size: 28rpx;display: flex;flex-direction: row;
}
.item-box-time-left,.item-box-time-right{flex: 1;font-size: 26rpx;
}
.item-box-time-right{text-align: right;
}

js中的数据就不写了，数组对象后端返回的。PS，想到一个问题，如果所有文章都是奇数短，偶数长，列表尾部会不会出现右侧很长，左侧比较短的问题。

微信小程序瀑布流列表相关推荐

uview 瀑布流_微信小程序瀑布流最好最简单的解决方案
网上能搜到的小程序瀑布流解决方案,要么代码复杂.逻辑混乱,要么实现不了业务功能,所以把我在项目中的实现方案给大家分享下. 最简单的实现方案,不适用有分页的场景. 这个方案简单的原因是因为仅仅使用了cs ...
微信小程序瀑布流的实现
今天介绍下瀑布流的实现,在客服端想实现这种布局都提供了方法,在微信小程序中只能通过css提供的方式自己布局. 想实现这种效果其实可以使用css的方法直接放成两列就可以了column-count:2; ...
微信小程序--瀑布流加载
本文主要介绍小程序的瀑布流加载.实现的原理是,通过bindload监听图片加载,然后计算每张图片的高度,将list根据高度分别,创建2个新数组col1.col2. 1..xml <view cl ...
微信小程序 - - - - - 瀑布流效果实现
瀑布流效果 1. 瀑布流 1.1 什么叫瀑布流? 1.2 瀑布流有什么优点? 1.3 如何实现瀑布流的关键是什么? 2. 实现思路 2.1 思路梳理 2.2 实现瀑布流对于一些小程序,关于瀑布流的需 ...
微信小程序 —— 瀑布流简单写法（css3属性加wx：if判断轻松实现）
css3中的column-count 规定元素应该被分隔的列数. 纯css3完成瀑布流具体思路: 1. 先用css3中的column-count属性把页面元素分为俩列及多列.2. 再用wx:if=&q ...
微信小程序瀑布流实现
瀑布流这就是大概的效果一.WXML 这个是完整的两个板块,其实具体里面是什么不重要,重要的是两个最外层的view标签: <view class="pubu_left" i ...
微信小程序、流应用、原生应用app、轻应用
引言介绍: 应用分为:原生应用(Native APP).轻应用(webapp或者h5app)和混合应用(HibidAPP) 其中流应用和轻应用现在多基于浏览器开啊H5应用程序小程序是基于微信平台(软 ...
Android微信小程序原理,微信小程序事件流原理解析
这篇文章主要介绍了微信小程序事件流原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下一.什么是事件? 事件是视图层到逻辑层的通讯方式: 事件可 ...
基于微信小程序的用户列表点赞功能
代码地址如下: http://www.demodashi.com/demo/13997.html 一.前言 (1).适合人群 1.微信小程序开发者 2.前端工程师 3.想入门学习小程序开发的人员 4. ...

微信小程序瀑布流列表

微信小程序瀑布流列表相关推荐

最新文章

热门文章