当前位置:网站首页>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
边栏推荐
- How to apply for PMP project management certification examination?
- 跨域请求
- Some basic functions of enterprise projects are developed, and important things are saved to online first a
- 45岁教授,她投出2个超级独角兽
- Best practice case of enterprise digital transformation: introduction and reference of cloud based digital platform system security measures
- [path planning] RRT adds dynamic model for trajectory planning
- 取得PMP證書需要多長時間?
- How to use fast parsing to make IOT cloud platform
- Introduction to ACM combination counting
- Fs8b711s14 electric wine bottle opener MCU IC scheme development special integrated IC
猜你喜欢
取得PMP证书需要多长时间?
OSEK standard ISO_ 17356 summary introduction
人脸识别5- insight-face-paddle-代码实战笔记
ECCV 2022 | 腾讯优图提出DisCo:拯救小模型在自监督学习中的效果
巩固表达式C# 案例简单变量运算
In the enterprise, win10 turns on BitLocker to lock the disk, how to back up the system, how to recover when the system has problems, and how to recover quickly while taking into account system securi
城市轨道交通站应急照明疏散指示系统设计
ECCV 2022 | Tencent Youtu proposed disco: the effect of saving small models in self supervised learning
Why does infographic help your SEO
Every time I look at the interface documents of my colleagues, I get confused and have a lot of problems...
随机推荐
How to do the project of computer remote company in foreign Internet?
ECCV 2022 | Tencent Youtu proposed disco: the effect of saving small models in self supervised learning
Selected cutting-edge technical articles of Bi Ren Academy of science and technology
45岁教授,她投出2个超级独角兽
In the enterprise, win10 turns on BitLocker to lock the disk, how to back up the system, how to recover when the system has problems, and how to recover quickly while taking into account system securi
Some basic functions of enterprise projects are developed, and important things are saved to online first a
[IELTS reading] Wang Xiwei reading P3 (heading)
跨域请求
用快解析内网穿透实现零成本自建网站
【监控】zabbix
How to avoid arc generation—— Aafd fault arc detector solves the problem for you
C语言中sizeof操作符的坑
ECCV 2022 | 腾讯优图提出DisCo:拯救小模型在自监督学习中的效果
Cross domain request
Hong Kong Jewelry tycoon, 2.2 billion "bargain hunting" Giordano
巩固表达式C# 案例简单变量运算
Design of emergency lighting evacuation indication system for urban rail transit station
Advanced template
Actual combat simulation │ JWT login authentication
如何将自己的代码作品快速存证,已更好的保护自己劳动成果