uview 瀑布流_微信小程序 瀑布流布局
今天做小程序的时候,碰到一个比较常见的需求,就是要瀑布流布局,两列,交错分布,大概如下图
最终要实现的结果就是如左图所示。
不过在微信小程序里面,不能通过JavaScript来直接操作dome,所以一些常用的方法在这里都没有办法用了。这让笔者非常着急,因为项目比较赶,不能因为这种低级的布局问题拖慢了进度。
百度了半天,发现了css3的column这个属性,但是最后实现出来的方法就如右图所示,这不符合需求,需求是两列,从左到右进行排列的,大概就像小红书APP那种瀑布流布局
最后笔者终于找到一种非常诡异的方法,哈哈,废话不多说,直接上代码
》
{{title}}
{{name}}
{{heart_num}}
CSS样式
.content{margin:0 20rpx;text-align:justify;
}.item{background-color:#fff;margin:1%;margin-bottom:20rpx;display:inline-block;
}.item-ava{width:40rpx;height:40rpx;border-radius:20rpx;
}.heart{width:30rpx;height:26rpx;margin-right:8rpx;
}.heart_{display:flex;align-items:center;
}.item-img{width:100%}.item-title{font-size:24rpx;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;font-family:'PingFang SC-Medium';color:#1e1e1e;margin:15rpx;line-height:27rpx;
}.item .name{display:flex;padding:0 15rpx;margin-top:20rpx;padding-bottom:10rpx;align-items:center;font-size:22rpx;color:#1e1e1e;font-family:'PingFang SC-Medium';
}.name image{flex:0 0 30rpx;
}.item-title-box{display:flex;position:relative;
}.name-title{flex:1;margin-left:18rpx;margin-right:20rpx;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;
}.name text:last-child{flex:0 0 30rpx;color:#c4c4c4;text-decoration:underline;line-height:10rpx;
}.left,.right{display:inline-block;vertical-align:top;width:49%;
}.right{float:right;
}
js数据
var app =getApp()
Page({
data: {
note:[
{
name:'大脸猫爱吃鱼大脸猫爱吃鱼大脸猫爱吃鱼大脸猫爱吃鱼大脸猫爱吃鱼',
heart_num:'1',
title:'你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识',
url:'http://f10.baidu.com/it/u=121654667,1482133440&fm=72',
avatar:'http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg'},
{
name:'大脸猫爱吃鱼',
heart_num:'2',
title:'你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识',
url:'http://img3.imgtn.bdimg.com/it/u=1417732605,3777474040&fm=26&gp=0.jpg',
avatar:'http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg'},
{
name:'大脸猫爱吃鱼',
heart_num:'3',
title:'你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识',
url:'http://img3.imgtn.bdimg.com/it/u=1417732605,3777474040&fm=26&gp=0.jpg',
avatar:'http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg'}, {
name:'大脸猫爱吃鱼',
heart_num:'4',
title:'你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识',
url:'http://f10.baidu.com/it/u=121654667,1482133440&fm=72',
avatar:'http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg'},
{
name:'大脸猫爱吃鱼',
heart_num:'5',
title:'你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识',
url:'http://f10.baidu.com/it/u=121654667,1482133440&fm=72',
avatar:'http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg'},
{
name:'大脸猫爱吃鱼',
heart_num:'6',
title:'你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识',
url:'http://img3.imgtn.bdimg.com/it/u=1417732605,3777474040&fm=26&gp=0.jpg',
avatar:'http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg'},
{
name:'大脸猫爱吃鱼',
heart_num:'7',
title:'你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识',
url:'http://img4.imgtn.bdimg.com/it/u=2748975304,2710656664&fm=26&gp=0.jpg',
avatar:'http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg'}, {
name:'大脸猫爱吃鱼',
heart_num:'8',
title:'你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识',
url:'http://img2.imgtn.bdimg.com/it/u=1561660534,130168102&fm=26&gp=0.jpg',
avatar:'http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg'}
]}
})
最后出来的效果
哈哈,大概的思路就是,直接定义两列等宽的view,然后两列都加载相同的数据
敲黑板!!!记重点啦!!! wx:if="{{index%2==1}}" 这里,用if来辨别是奇数还是偶数,两边加载相反的,哈哈,这样就成功实现瀑布流了,是不是很简单?
uview 瀑布流_微信小程序 瀑布流布局相关推荐
- uview 瀑布流_微信小程序瀑布流最好最简单的解决方案
网上能搜到的小程序瀑布流解决方案,要么代码复杂.逻辑混乱,要么实现不了业务功能,所以把我在项目中的实现方案给大家分享下. 最简单的实现方案,不适用有分页的场景. 这个方案简单的原因是因为仅仅使用了cs ...
- 微信小程序 - - - - - 瀑布流效果实现
瀑布流效果 1. 瀑布流 1.1 什么叫瀑布流? 1.2 瀑布流有什么优点? 1.3 如何实现瀑布流的关键是什么? 2. 实现思路 2.1 思路梳理 2.2 实现瀑布流 对于一些小程序,关于瀑布流的需 ...
- 微信小程序系统教程Java版[3/3阶段]_微信小程序电商系统-翟东平-专题视频课程...
微信小程序系统教程Java版[3/3阶段]_微信小程序电商系统-2445人已学习 课程介绍 微信小程序系统教程[初级阶段],微信小程序0基础学起,讲解微信小程序开发的基础知识. 微信小 ...
- 视频教程-微信小程序系统教程Java版[3/3阶段]_微信小程序电商系统-微信开发
微信小程序系统教程Java版[3/3阶段]_微信小程序电商系统 微信企业号星级会员.10多年软件从业经历,国家级软件项目负责人,主要从事软件研发.软件企业员工技能培训.已经取得计算机技术与软件资格考试 ...
- 黑马优购_微信小程序
黑马优购_微信小程序项目 介绍 2021年5月6日-2021年5月12日在校参加微信小程序培训,由黑马讲师授课,能够利用微信提供的组件和API实现轮播图.授权用户信息.上拉加载更多等功能,由于之前对u ...
- 视频教程-微信小程序系统教程python版[3/3阶段]_微信小程序支付-手游开发
微信小程序系统教程python版[3/3阶段]_微信小程序支付 微信企业号星级会员.10多年软件从业经历,国家级软件项目负责人,主要从事软件研发.软件企业员工技能培训.已经取得计算机技术与软件资格考试 ...
- uview 瀑布流_最简单的微信小程序瀑布流布局方法
最近写一个小程序的瀑布流布局,发现网上别人写的都是css加js的方法,页面分两列,加载数据通过JS分别载入到两列中.比较复杂,研究了一下,弄了一个比较简单的方法,分享给大家. 效果如下图: 小程序瀑布 ...
- 微信小程序瀑布流的实现
今天介绍下瀑布流的实现,在客服端想实现这种布局都提供了方法,在微信小程序中只能通过css提供的方式自己布局. 想实现这种效果其实可以使用css的方法直接放成两列就可以了column-count:2; ...
- 微信小程序 瀑布流布局 终极解决方案
瀑布流布局 网上找了很多 发现都有bug 要不就很麻烦 自己手写了一个 使用的是flex 布局 最主要的属性就是 flex-wrap: warp //超出自动换行 当你想使用3列排列是 子元素 宽度 ...
- 企业微信小程序可用存储空间不足_微信小程序为什么能帮助企业商家引流?
点击蓝字 关注我们 微信小程序,腾讯公司于2017年推出的一款手机应用.自小程序诞生以来,各行各业都有不少企业和商家开发了自己的小程序,并通过小程序为自己吸引了巨大的流量.那么,小程序为什么能帮助企业 ...
最新文章
- php 4443 端口_Server configuration (Notary)
- linux 多线程条件变量,linux多线程之条件变量
- LibSvm python 调试实验
- Java对象的序列化与反序列化
- 转载的孩子们注意节操哈!!!
- jQuery attr removeAttr 属性操作
- NSHashTable and NSMapTable
- 03_MySQL多表事务课堂笔记
- MFC窗口标题栏隐藏
- KG—ARM-Thumb子程序调用规则—ATPCS
- python中lower()函数的用法
- html select ajax,AJAX 动态加载后台数据 绑定select的方法
- onSaveInstanceState onRestoreInstanceState
- ubuntu 安装 sublime
- tpu云_如何与TPU合作
- 转载 | 年度盘点!Flink 社区全年的精华内容都在这里啦
- 第2章 初学 emWin 的准备工作及其快速上手
- 微博短视频百万级高可用、高并发架构如何设计?
- geoserver之gs-kml、gs-wcs、gs-rest、gs-gwc、gs-sec-jdbc
- 穿冰丝很凉快,是有降温作用吗?穿戴冰丝衣物要注意哪些?