概述
复制粘贴即可使用
<template>
<view class="Index">
<!-- 瀑布流布局列表 -->
<view class="pubuBox">
<view class="pubuItem">
<view class="item-masonry" v-for="(item, index) in comList" :key="index" @click="listClick(item.id)">
<image :src="item.img" mode="aspectFill"></image>
<view class="listtitle">
<!-- 这是没有高度的父盒子（下半部分） -->
<view class="listtitle1">
<text class="dis">2折</text>{{ item.name }}
</view>
<view class="listtitle2">
<text class="listtitle2son">￥</text>
{{ item.commdityPrice }}
</view>
<view class="listtitle3">
副标题文案副标题文案标副标题文案副标题文案标题
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
comList: [{
img: "https://img.zcool.cn/community/01x6kpnd5xkdj8kjk9wr4v3434.jpg?x-oss-process=image/auto-orient,1/format,webp/quality,q_100",
name: '1商品的名称，可以很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长',
id: 100,
commdityPrice: 100
}, {
img: 'https://img.zcool.cn/community/01ehtlzktmuwp4rrhb4tbx3137.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,q_100',
name: '2商品名称会在超出N行时候不折叠',
id: 100,
commdityPrice: 9.9
}, {
img: 'https://img.zcool.cn/community/01j4io9e85yp58cvcjve6n3537.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,q_100',
name: '3只有二行标题时高度为39',
id: 100,
commdityPrice: 23.25
}, {
img: 'https://img.zcool.cn/community/01nkdyurt61q0urfgmvf9r3139.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,q_100',
name: '4具体样式您可以自定义',
id: 100,
commdityPrice: 99
}, {
img: 'https://img.zcool.cn/community/01vt8hehf3hy26r2bugpkh3637.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,q_100',
name: '5vue的H5页面也是如此使用',
id: 100
}, {
img: 'https://img.zcool.cn/community/01pq3iiwivc66abrog0ng03432.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,q_100',
name: '6只有一行标题时',
id: 100,
commdityPrice: 666
}, {
img: 'https://img.zcool.cn/community/011jnnxgujocmfd4v568u03237.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,q_100',
name: '7vue的H5页面也是如此使用',
commdityPrice: 100
}, {
img: 'https://img.zcool.cn/community/01hfta38ncrt9q7jkfzn7a3937.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,q_100',
name: '8vue的H5页面也是如此使用',
commdityPrice: 100
}, {
img: 'https://img.zcool.cn/community/01aikxbpiosr0ylklehgoa3839.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,q_100',
name: '9标题标题标题标题标题标题',
commdityPrice: 100
}, {
img: 'https://img.zcool.cn/community/01hxpklnf1rndy336wfxhj3330.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,q_100',
name: '1010101010101010101010101010101010101010101',
commdityPrice: 100
}, {
img: 'https://img.zcool.cn/community/01x8i5cputt39i3txxdk5q3033.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,q_100',
name: '11标题标题标题标题标题标题11111111111111111111',
commdityPrice: 100
}, {
img: 'https://img.zcool.cn/community/01p1hop68owgle9aplwzey3737.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,q_100',
name: '12标题标题标题标题标题标题',
commdityPrice: 100
}, {
img: 'https://img.zcool.cn/community/01f7sparqzu9xify4sdwkl3337.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,q_100',
name: '13标题标题标题标题标题标题',
commdityPrice: 100
}, {
img: 'https://img.zcool.cn/community/01x10hlbxnhft6tduv7oou3431.gif',
name: '14标题标题标题标题标题标题14',
commdityPrice: 100
}
], //商品列表
};
},
onShow() {},
onLoad() {},
methods: {
// 点击列表
listClick(id) {
},
},
};
</script>
<style lang="scss">
page{background: #f3f3f3;}
//瀑布流
.pubuBox {padding: 30rpx;}
.pubuItem {column-count: 2;column-gap: 20rpx;}
.item-masonry {
box-sizing: border-box;
border-radius: 15rpx;
overflow: hidden;
background-color: #fff;
break-inside: avoid;
/*避免在元素内部插入分页符*/
box-sizing: border-box;
margin-bottom: 20rpx;
// box-shadow: 0px 0px 28rpx 1rpx rgba(78, 101, 153, 0.14);
}
.item-masonry image {
width: 335rpx !important;
height: 200rpx !important;
border-radius: 20rpx 20rpx 0rpx 0rpx;
margin-bottom: 20rpx;
}
.listtitle {
padding-left: 20rpx;
padding-right: 20rpx;
font-size: 24rpx;
padding-bottom: 22rpx;
.listtitle1 {
// text-overflow: -o-ellipsis-lastline;
// overflow: hidden;
// text-overflow: ellipsis;
// display: -webkit-box;
// -webkit-line-clamp: 2;
// line-clamp: 2;
// -webkit-box-orient: vertical;
// min-height: 39rpx;
// max-height: 78rpx;
font-size: 24rpx;
line-height: 43rpx;
color: #000000;
.dis{
padding: 0 14rpx;
background: #FFF2E7;
border-radius: 10rpx;
font-size: 22rpx;
font-weight: bold;
color: #FF8319;
margin-right: 5rpx;
}
}
.listtitle2 {
color: #ff0000;
font-size: 32rpx;
line-height: 32rpx;
font-weight: bold;
padding-top: 22rpx;
.listtitle2son {
font-size: 32rpx;
}
}
.listtitle3 {
font-size: 19rpx;
color: #999;
// line-height: 32rpx;
padding-top: 22rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
line-clamp: 1;
-webkit-box-orient: vertical;
}
}
.Index {
width: 100%;
height: 100%;
}
</style>最后
以上就是聪慧蜜蜂为你收集整理的小程序瀑布流排版（图片文字自适应）的全部内容，希望文章能够帮你解决小程序瀑布流排版（图片文字自适应）所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复