uniapp微信小程序瀑布流布局

效果图链接：
https://img-blog.csdnimg.cn/1feb07041a494d238b60b6de2fc97f23.png源代码：

<template><view class="Index"><!-- 瀑布流布局列表 --><view class="pubuBox"><view class="pubuItem"><view class="item-masonry" v-for="(item, index) in comList" :key="index"><image :src="item.img" mode="widthFix"></image><view class="listtitle"> <!-- 这是没有高度的父盒子（下半部分） --><view class="listtitle1">{{ 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: "http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23346_s.jpg",name: '商品的名称，可以很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长',commdityPrice: 100}, {img: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',name: '商品名称会在超出两行时候自动折叠',commdityPrice: 100},{img: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',name: '只有一行标题时高度为39',commdityPrice: 100}, {img: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',name: '具体样式您可以自定义',commdityPrice: 100}, {img: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',name: 'vue的H5页面也是如此使用',commdityPrice: 100}], //商品列表};},onShow() {},onLoad() {},methods: {},};
</script><style scoped="scoped" lang="scss">//瀑布流page {background-color: #eee;height: 100%;}.pubuBox {padding: 22rpx;}.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: 100%;}.listtitle {padding-left: 22rpx;font-size: 24rpx;padding-bottom: 22rpx;.listtitle1 {line-height: 39rpx;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;}.listtitle2 {color: #ff0000;font-size: 32rpx;line-height: 32rpx;font-weight: bold;padding-top: 22rpx;.listtitle2son {font-size: 32rpx;}}.listtitle3 {font-size: 28rpx;color: #909399;line-height: 32rpx;padding-top: 22rpx;}}.Index {width: 100%;height: 100%;}
</style>

uniapp微信小程序瀑布流布局相关推荐

uview 瀑布流_最简单的微信小程序瀑布流布局方法
最近写一个小程序的瀑布流布局,发现网上别人写的都是css加js的方法,页面分两列,加载数据通过JS分别载入到两列中.比较复杂,研究了一下,弄了一个比较简单的方法,分享给大家. 效果如下图: 小程序瀑布 ...
微信小程序瀑布流布局终极解决方案
瀑布流布局网上找了很多发现都有bug 要不就很麻烦自己手写了一个使用的是flex 布局最主要的属性就是 flex-wrap: warp //超出自动换行当你想使用3列排列是子元素宽度 ...
uni-app微信小程序登录授权
uni-app微信小程序登录授权首先是需要用到一个授权按钮来触发获取用户信息授权: 关键在于 open-type 为 getUserInfo , 然后有个@getuserinfo的事件,把获取授权接 ...
【大白话学习】UniApp 微信小程序与APP应用开发零基础入门教程(一）---基础页面框架搭建
写在前面话: 随着互联网的快速发展,微信小程序应用的快速便捷,不用下载安装等的优势越来越明显,于是,我就开始着手于小程序开发的学习,虽然微信提供了开发工具,但它只能生成小程序 ,不能生成APP,那么有 ...
uniapp 微信小程序开发图片上传压缩
uniapp 微信小程序开发图片上传压缩安卓上传图片并压缩思路全部代码安卓上传图片并压缩由于后端接口对图片的大小有限制,所以在上传图片是需要压缩处理: uni.chooseImage({c ...
uniapp微信小程序授权登录和获取微信绑定的手机号码
uniapp微信小程序授权登录和获取微信绑定的手机号码弹出授权的弹框 <view class="weixinOk" @tap="getUserProfile&qu ...
uni-app 微信小程序实现全屏悬浮按钮可拖动，自动吸附边缘
原文链接:uni-app 微信小程序实现全屏客服按钮可拖动,自动吸边-小月博客效果图如下: html : <movable-area class="movableArea" ...
uni-app 微信小程序分享按钮
uni-app 微信小程序分享按钮官方文档说明在 manifest.json 的 App SDK 配置里,勾选微信消息及朋友圈,并填写相关 appkey,微信 appkey 在需要分享的页面填写: ...
uni-app 微信小程序 + 友盟统计 sdk
在开发小程序时,有些功能会需要统计用户点击次数.登录人数.访问时长等数据,用来分析用户的一些行为:这里分享一下用 uni-app 开发微信小程序借助友盟 SDK 在前端页面中埋点统计的实现过程: 1. ...

uniapp微信小程序瀑布流布局

uniapp微信小程序瀑布流布局相关推荐

最新文章

热门文章