uniapp商品瀑布流

这是一款简单又好用的瀑布流布局模板，通过页面模板+组件的方式。充分利用组件的复用性和页面的生命周期。
源码来自于作者：黄河爱浪的瀑布流布局-waterfal
本文对源码和mescroll进行了结合，总结出来方便下次可以直接使用。mescroll的使用参考这篇文章

主页面：index.vue

<template><view><mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"><helang-waterfall :newList="newList" :pageNum="pageNum"></helang-waterfall></mescroll-body></view>
</template><script>import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";import helangWaterfall from "@/uni_modules/helang-waterfall/components/helang-waterfall/helang-waterfall"export default {mixins: [MescrollMixin], // 使用mixincomponents: {"helang-waterfall": helangWaterfall},data() {return {newList: [],pageNum: 1,//页码}},methods: {upCallback(page) {this.pageNum = page.num;this.$http.post('/api/Shop/goodsList', {page: page.num,pageSize: 10,}).then(res => {if (res.code == 1) {let arr = res.data.list;this.newList = arr; // 这里只需将数据传到子组件，由子组件内方法判断是左还是右this.$nextTick(() => {this.mescroll.endSuccess(arr.length)})}}).catch((e) => {this.mescroll.endErr();});},}}
</script><style lang="scss">page {background-color: #f3f3f3;}
</style><style lang="scss" scoped>
</style>

helang-waterfall

<template><view class="waterfall-box h-flex-x h-flex-2"><view><view class="waterfall-item" v-for="(item,index) in leftList" :key="index" tag="left" :index="index"@height="onHeight" @click="goBack(item.id)"><u-image width="100%" height="332rpx" :src="$imgUrl+item.image" :lazy-load="true" border-radius="8"></u-image><view class="text"><text class="til u-line-2">{{item.store_name}}{{index}}</text><view class="money"><text>¥</text><text class="span">{{item.price}}</text></view></view></view></view><view><view class="waterfall-item" v-for="(item,index) in rightList" :key="index" @height="onHeight" tag="right":index="index" @click="goBack(item.id)"><u-image width="100%" height="332rpx" :src="$imgUrl+item.image" :lazy-load="true" border-radius="8"></u-image><view class="text"><text class="til u-line-2">{{item.store_name}}</text><view class="money"><text>¥</text><text class="span">{{item.price}}</text></view></view></view></view></view></template><script>export default {name: "helang-waterfall",watch: {newList(data, oldVal) {this.addList(data)},},data() {return {leftList: [],rightList: [],leftHeight: 0,rightHergt: 0,}},props: {newList: {type: Array,},pageNum: {type: String | Number,default: ''},title: {type: String,},},methods: {goBack(id) {console.log('页面跳转')},// 监听高度变化onHeight(height, tag) {if (tag == 'left') {this.leftHeight += height;} else {this.rightHeight += height;}},// 发出组件高度信息，在此处可以区分正确和错误的加载，给予错误的提示图片emitHeight(e) {const query = uni.createSelectorQuery().in(this);query.select('.waterfall-item').boundingClientRect(data => {let height = Math.floor(data.height);this.$emit("height", height, this.$props.tag);}).exec();},//计算将数据放在左边还是右边addList(res) {let differ = this.leftHeight - this.rightHeight;let differVal = 0;let i = differ > 0 ? 1 : 0;let [left, right] = [[],[]];let getDirection = (index) => {if (differ >= 600 && index < 3) {differVal = 1;return 'right';}if (differ <= -600 && index < 3) {differVal = -1;return 'left';}if (differ >= 350 && index < 2) {return 'right';}if (differ <= -350 && index < 2) {differVal = -1;return 'left';}if ((i + differVal) % 2 == 0) {return 'left';} else {return 'right';}}res.forEach((item, index) => {if (getDirection(index) == 'left') {left.push(item);} else {right.push(item);}i++;});this.$nextTick(() => {if (this.pageNum == 1) {this.leftList = left;this.rightList = right;} else {this.leftList = [...this.leftList, ...left];this.rightList = [...this.rightList, ...right];}})},}}
</script><style lang="scss" scoped>.waterfall-box {padding: 20rpx 10rpx;box-sizing: border-box;background: #F9F9F9;>view {padding: 0 10rpx;}}.h-flex-x {display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: flex-start;align-items: flex-start;align-content: flex-start;&.h-flex-2 {>view {width: 50%;}}}.load-txt {padding: 0 0 20rpx 0;text-align: center;color: #999;font-size: 24rpx;}.waterfall-item {width: 334rpx;padding-bottom: 16rpx;background-color: #fff;border-radius: 4px;font-size: 28rpx;color: #666;margin-bottom: 20rpx;uni-image {width: 332rpx;height: 332rpx;border-radius: 8rpx 8rpx 0rpx 0rpx;}.text {width: 290rpx;margin: 8rpx auto;text-align: justify;.til {font-size: 30rpx;height: 80rpx;word-break: break-all;color: #333;}.money {font-weight: bold;margin-top: 20rpx;color: #DD1A21;font-size: 24rpx;.span {font-size: 34rpx;color: #DD1A21;}}}}
</style>

效果图

uniapp商品瀑布流相关推荐

uni-app 实现瀑布流最简洁方案
瀑布流实现效果实现思路同样采用常见的两栏瀑布流布局,分别用数组goodsLeftList和goodsRightList储存左右两栏要渲染对象, 初始化时,加载一张图片,然后依次把图片加到栏高更低的 ...
uniapp实现瀑布流基本写法
大概的结构布局是这样呈现的先由最外层一个div包裹着左右等宽的div, 左边的是index为奇数区,右边是index为偶数区,具体实现就是给每个区域添加 v-if="index%2=1&q ...
uniapp实现瀑布流懒加载实现和无限上拉加载更多
效果图: 说明: 函数说明:传入一个数组,循环获取图片高度,会根据把原数组拆分成两个数组,放在两列, 计算单列累计高度,对比高度值的大小,实现瀑布流的布局, ...
uniapp 土法瀑布流 - vue3
效果图代码 <template><view><view class="rowSta ...
UNi-APP多端商品列表瀑布流页商品详情页
<template><view class="container"><u-toast ref="uTo ...
uniapp实现简单图片瀑布流
前言: 由于使用uniapp开发的微信小程序不需要考虑响应式,因此瀑布流的实现相对于pc端更为简单. 思路: 创建宽度一致左右两个盒子用于展示图片流,用过判断两个盒子的高度大小来决定下一张图片插入到哪 ...
uniapp开发：瀑布流灵活配置简单易用兼容vue2vue3小程序、H5、app等多端
概要支持的平台使用方式属性说明事件说明组件方法 refresh的使用示例隐藏单项图片示例完整示例温馨提示关注我,不迷路概要 custom-waterfalls-flow是一个瀑布流 ...
《uni-app》移动端纯CSS实现不等高的瀑布流效果
<uni-app>移动端纯CSS实现不等高的瀑布流效果前言示例 WEB端示例移动端示例瀑布流实现第一种: flex 核心代码实现缺点完整代码第二种:column-coun ...
不固定图片宽高瀑布流_APP设计学习：瀑布流式的产品UI设计
看到好的APP产品UI设计,真是忍不住想要停留几秒,慢慢来欣赏.今天学堂君收集了近期不错的优质的APP设计作品,看起来极舒服的UI界面,分享给大家.这一期的重点学习:在APP界面设计当中,如何应用瀑布 ...

uniapp商品瀑布流

uniapp商品瀑布流相关推荐

最新文章

热门文章