uniapp商品瀑布流

sunly_

已于 2023-11-06 09:21:37 修改

阅读量5k

点赞数 1

分类专栏： uniapp 文章标签： uniapp JS瀑布流瀑布流布局商品瀑布流

于 2021-11-10 14:15:13 首次发布

本文链接：https://blog.csdn.net/qq_40745143/article/details/121247323

版权

这是一篇关于uniapp中实现商品瀑布流布局的文章，介绍了一款基于组件复用和页面生命周期的模板，结合了黄河爱浪的waterfal源码和mescroll滚动插件，提供了主页面index.vue的实现细节和实际效果展示。

摘要由CSDN通过智能技术生成

这是一款简单又好用的瀑布流布局模板，通过页面模板+组件的方式。充分利用组件的复用性和页面的生命周期。
源码来自于作者：黄河爱浪的瀑布流布局-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], // 使用mixin
		components: {
     
			"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">