当前位置:网站首页>uniapp微信小程序拿来即用的瀑布流布局demo2(方法二)(复制粘贴即可使用,无需做其他处理)
uniapp微信小程序拿来即用的瀑布流布局demo2(方法二)(复制粘贴即可使用,无需做其他处理)
2022-07-05 00:02:00 【我是开心呀】
效果图:
<template>
<view class="container">
<view class="left">
<view v-for="(item,index) in leftList" :key="index" class="imgBox">
<image :src="item.img" alt="" mode="widthFix"></image>
<view class="txt">{
{
item.name}}</view>
</view>
</view>
<view class="right">
<view v-for="(item,index) in rightList" :key="index" class="imgBox">
<image :src="item.img" alt="" mode="widthFix"></image>
<view class="txt">{
{
item.name}}</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: [{
img: "../../static/home/weixin.png",
name: '0商品的名称,可以很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长',
id: 100
}, {
img: "../../static/home/bg_yjc.png",
name: '1商品的名称,可以很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长',
id: 100
}, {
img: "../../static/home/bg.png",
name: '2商品名称会在超出N行时候不折叠',
id: 100
},
{
img: "../../static/home/bg.png",
name: '3只有二行标题时高度为39',
id: 100
}, {
img: "../../static/home/bg.png",
name: '4具体样式您可以自定义',
id: 100
}, {
img: "../../static/home/bg_yjc.png",
name: '5vue的H5页面也是如此使用',
id: 100
}, {
img: "../../static/img/shenfen1.png",
name: '6只有一行标题时',
id: 100
}, {
img: "../../static/home/bg_yjc.png",
name: '7vue的H5页面也是如此使用',
commdityPrice: 100
}, {
img: "../../static/home/bg.png",
name: '8vue的H5页面也是如此使用',
commdityPrice: 100
}, {
img: "../../static/home/bg_yjc.png",
name: '9vue的H5页面也是如此使用',
commdityPrice: 100
}, {
img: "../../static/home/weixin.png",
name: '10商品的名称,可以很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长',
id: 100
},
], //商品列表,
// 初始化左右盒子
leftList: [],
rightList: [],
// 初始化左右盒子高度
leftH: 0,
rightH: 0
}
},
// 页面加载
onLoad(e) {
this.doList()
},
// 页面显示
onShow() {
},
// 方法
methods: {
doList() {
const that = this
this.list.forEach(res => {
// 获取图片宽高
uni.getImageInfo({
src: res.img,
success: (image) => {
console.log(res.img)
// 计算图片渲染高度
let showH = (50 * image.height) / image.width
// 判断左右盒子高度
if (that.leftH <= that.rightH) {
that.leftList.push(res)
that.leftH += showH
} else {
that.rightList.push(res)
that.rightH += showH
}
}
})
})
}
},
// 计算属性
computed: {
},
// 侦听器
watch: {
},
// 页面隐藏
onHide() {
},
// 页面卸载
onUnload() {
},
// 触发下拉刷新
onPullDownRefresh() {
this.pageNum = 1
// this.getListData()
},
// 页面上拉触底事件的处理函数
onReachBottom() {
this.pageNum++
// this.getListData()
},
}
</script>
<style lang="scss" scoped>
.container {
padding: 0 30rpx;
font-size: 14rpx;
line-height: 24rpx;
}
.right,
.left {
display: inline-block;
width: 40%;
vertical-align: top;
.imgBox{
margin-bottom: 25rpx;
.txt{
font-size: 24rpx;
}
}
}
.left {
float: left;
}
.right{
float: right;
}
.left image,
.right image {
width: 100%;
margin-bottom: 10rpx;
}
</style>
转载:感谢分享
原文链接:https://blog.csdn.net/He_n_ry/article/details/125242284
边栏推荐
- 如何用快解析自制IoT云平台
- 【雅思阅读】王希伟阅读P4(matching2段落信息配对题【困难】)
- How long does it take to obtain a PMP certificate?
- go踩坑——no required module provides package : go.mod file not found in current directory or any parent
- 青海省国家湿地公园功能区划数数据、全国湿地沼泽分布数据、全国省市县自然保护区
- The input of uniapp is invalid except for numbers
- What is the difference between port mapping and port forwarding
- PermissionError: [Errno 13] Permission denied: ‘data. csv‘
- PaddleOCR教程
- Netcore3.1 JSON web token Middleware
猜你喜欢
【kotlin】第三天
[binary tree] the maximum difference between a node and its ancestor
Build your own minecraft server with fast parsing
Face recognition 5- insight face padding code practice notes
用快解析内网穿透实现零成本自建网站
【雅思阅读】王希伟阅读P4(matching2段落信息配对题【困难】)
他做国外LEAD,用了一年时间,把所有房贷都还清了
He worked as a foreign lead and paid off all the housing loans in a year
45岁教授,她投出2个超级独角兽
The input of uniapp is invalid except for numbers
随机推荐
企业公司项目开发好一部分基础功能,重要的事保存到线上第一a
js正则表达式之中文验证(转)
Selected cutting-edge technical articles of Bi Ren Academy of science and technology
[path planning] RRT adds dynamic model for trajectory planning
The pit of sizeof operator in C language
如何将自己的代码作品快速存证,已更好的保护自己劳动成果
业务实现-日志写到同一个行数据里面
用快解析内网穿透实现零成本自建网站
Paddleocr tutorial
快解析内网穿透帮助企业快速实现协同办公
如何避免电弧产生?—— AAFD故障电弧探测器为您解决
解决无法通过ssh服务远程连接虚拟机
业务场景功能的继续修改
[Peking University] tensorflow2.0-1-opening
Actual combat simulation │ JWT login authentication
Every time I look at the interface documents of my colleagues, I get confused and have a lot of problems...
[paper reading] cavemix: a simple data augmentation method for brain vision segmentation
PMP证书续证流程
[JS] - [sort related] - Notes
How to effectively monitor the DC column head cabinet