小程序-两列瀑布流布局
时间:2022-07-28
本文章向大家介绍小程序-两列瀑布流布局,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
新的设计图是按两列瀑布流排版的,类似于花瓣网那种。看到设计图后就在网上找,如何在小程序简单的实现,后来找到了一个特别简单的方法,就是利用wx:if
和数组的下标对2取余来判断是排在左列还是排在右列, 话不多说看图上代码:
wxml:
<view class='footlist'>
<view class="foot-left">
<block wx:for="{{list}}" wx:key="{{ item.id }}">
<view class='footbox' catchtap='jumpdetail' catchlongtap="deletefoot" bindtouchend="touchend" id="{{item.id}}" wx:if="{{index%2==0}}" data-cover="{{item.banner}}" data-title="{{item.title}}">
<image class='cover' src="{{item.banner}}" mode="widthFix"></image>
<view class="box-shadow">
<text class='t1'>{{item.title}}</text>
<view class='bot'>
<view class='personbox' data-userid="{{item.userid}}" catchtap="toProfile">
<image src="{{item.userinfo.avatarurl}}"></image>
<text class="username">{{item.userinfo.nickName}} </text>
</view>
<view class='thump' data-fid='{{item.id}}' catchtap='thumptap'>
<image class='un' data-fid='{{item.id}}' wx:if="{{item.islike=='1'}}" catchtap='unthumptap' src="../../images/thumph.png"></image>
<view style="color:red;">❤ </view>
<view class='thumpnum'>{{item.like}}</view>
</view>
</view>
</view>
</view>
</block>
</view>
<view class="foot-right">
<block wx:for="{{list}}" wx:key="{{ item.id }}">
<view class='footbox' catchtap='jumpdetail' catchlongtap="deletefoot" bindtouchend="touchend" id="{{item.id}}" wx:if="{{index%2==1}}" data-cover="{{item.banner}}" data-title="{{item.title}}">
<image class='cover' src="{{item.banner}}" mode="widthFix"></image>
<view class="box-shadow">
<text class='t1'>{{item.title}}</text>
<view class='bot'>
<view class='personbox' data-userid="{{item.userid}}" catchtap="toProfile">
<image src="{{item.userinfo.avatarurl}}"></image>
<text class="username">{{item.userinfo.nickName}}</text>
</view>
<view class='thump' data-fid='{{item.id}}' catchtap='thumptap'>
<image class='un' data-fid='{{item.id}}' wx:if="{{item.islike=='1'}}" catchtap='unthumptap' src="../../images/thumph.png"></image>
<view style="color:red;">❤</view>
<view class='thumpnum'>{{item.like}}</view>
</view>
</view>
</view>
</view>
</block>
</view>
</view>
js:
Page({
/**
* 页面的初始数据
*/
data: {
list: [{
id: 174,
userid: 10,
title: "日本岚山、和服一日游",
banner: "https://hbimg.huabanimg.com/1ff95bdf3070e1fbff052a03ed353b409749f5ea16a809-WXy25b_fw658",
points: 6,
like: "62",
userinfo: {
id: 10,
nickName: "李诗源",
avatarurl: "https://pic3.zhimg.com/80/v2-fd0a58741fdf20f256c755719f81871e_hd.jpg"
},
islike: 0
},
{
id: 173,
userid: 9,
title: "日本阿寒湖一日游",
banner: "https://hbimg.huabanimg.com/ee5bf07b84fead3d57b445d2e7fa8eb6afe827c617e9c-ha1fZH_fw658",
points: 7,
like: "92",
userinfo: {
id: 9,
nickName: "大飞狼",
avatarurl: "https://pic3.zhimg.com/80/v2-fd0a58741fdf20f256c755719f81871e_hd.jpg"
},
islike: 0
},
{
id: 172,
userid: 8,
title: "二次璧大乱斗东京动漫游",
banner: "http://img1qn.moko.cc/2019-08-12/235e9bab-046e-4fea-afc2-4a049d81774e.jpg?imageView2/2/w/915/h/915/q/85",
points: 4,
like: "41",
userinfo: {
id: 8,
nickName: "黄飞鸿",
avatarurl: "https://pic3.zhimg.com/80/v2-fd0a58741fdf20f256c755719f81871e_hd.jpg"
},
islike: 0
},
{
id: 100,
userid: 314,
title: "心和身体总要有一个在路上?",
banner: "http://img.mb.moko.cc/2019-05-18/285bd040-2e62-4e1b-b0e8-91351c1f3c67.jpg?imageView2/2/w/915/h/915",
points: 5,
like: "110",
userinfo: {
id: 314,
nickName: "二夏",
avatarurl: "https://pic3.zhimg.com/80/v2-fd0a58741fdf20f256c755719f81871e_hd.jpg"
},
islike: 0
},
{
id: 99,
userid: 312,
title: "新疆两日游",
banner: "http://img.mb.moko.cc/2019-04-26/d4f1905c-3952-42be-9214-72260b97b0be.jpg?imageView2/2/w/915/h/915",
points: 5,
like: "99",
userinfo: {
id: 312,
nickName: "Tohsaka",
avatarurl: "https://pic3.zhimg.com/80/v2-fd0a58741fdf20f256c755719f81871e_hd.jpg"
},
islike: 0
}
]
},
})
wxss:
.footlist {
position: relative;
border-top-left-radius: 10rpx;
border-top-right-radius: 10rpx;
padding-top: 20rpx;
}
.footlist::after {
content: '';
clear: both;
display: block;
}
.foot-left {
float: left;
width: 50%;
}
.foot-right {
float: left;
width: 50%;
}
.footbox {
width: 100%;
margin: 0 auto;
background: #fff;
box-sizing: border-box;
position: relative;
padding: 24rpx;
padding-top: 10rpx;
}
.box-shadow {
padding: 6rpx 10rpx 18rpx 10rpx;
box-sizing: border-box;
box-shadow: 0 2rpx 2rpx rgba(88, 88, 88, 0.233);
border-bottom-left-radius: 10rpx;
border-bottom-right-radius: 10rpx;
}
.footbox {
width: 100%;
margin: 0 auto;
background: #fff;
box-sizing: border-box;
position: relative;
padding: 24rpx;
padding-top: 10rpx;
}
.footbox image {
width: 100%;
border-top-left-radius: 10rpx;
border-top-right-radius: 10rpx;
}
.footbox .thump {
display: flex;
justify-content: space-between;
width: auto;
height: 42rpx;
}
.footbox .thump image {
width: 40rpx;
height: 42rpx;
float: right;
}
.footbox .bot {
display: flex;
justify-content: space-between;
width: 100%;
padding-top: 10rpx;
}
.footbox .bot::after {
display: block;
content: "";
clear: both;
}
.footbox .bot .t1 {
font-size: 30rpx;
color: #1f1607;
line-height: 1.5;
/* margin-left: 38rpx; */
overflow: hidden;
width: 100%;
margin-top: 15rpx;
}
.footbox .bot .t2 {
font-size: 28rpx;
color: #000;
line-height: 100rpx;
margin-left: 30rpx;
float: left;
}
.foot-left .footbox {
padding-right: 12rpx;
}
.personbox image {
width: 42rpx;
height: 42rpx;
border-radius: 50%;
background: #edaf39;
float: left;
border-top-left-radius: 10rpx;
border-top-right-radius: 10rpx;
}
- eclipse tomcat下网页修改不生效
- 【插件开发】—— 14 Site is incorrect!编辑器启动报错!
- Java魔法堂:Date与日期时间格式化
- Java魔法堂:打包知识点之META-INF/MAINFEST.MF
- WordPress快速建站
- 大数据时代下的生活
- 【Spring实战】—— 1 入门讲解
- 博客园小技巧
- JS魔法堂:关于元素位置和鼠标位置的属性
- MyBatis魔法堂:Insert操作详解(返回主键、批量插入)
- Winodws安装系统时,通过安装磁盘进行分区
- Eclipse安装SVN插件
- JS魔法堂:IE5~9的Drag&Drop API
- mysql 5.7版本目录无data文件夹的解决办法
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法