yicangzongtai_app_240321/template/SlyWaterfall/SlyWaterfall.vue

<template>
	<view class="" :style="$getStyle(styles.boxStyle)">
		<u-waterfall v-model="dataLists">
			<template v-slot:left="{leftList}">
				<view class="warter-left" :style="$getStyle(styles.goodsItem)" v-for="(item, index) in leftList"
					:key="index">
					<!-- {{item.image}} -->
					<!-- 这里编写您的内容，item为您传递给v-model的数组元素 -->
					<Goods :GoodsInfo="item" :styles="styles" />
					<!-- <u-lazy-load threshold="-100" border-radius="10" :image="item.image" :index="index"></u-lazy-load> -->
				</view>
			</template>
			<template v-slot:right="{rightList}">
				<view class="warter-right" :style="$getStyle(styles.goodsItem)" v-for="(item, index) in rightList"
					:key="index">
					<!-- 这里编写您的内容，item为您传递给v-model的数组元素 -->
					<Goods :GoodsInfo="item" :styles="styles" />
				</view>
			</template>
		</u-waterfall>
		<template v-if="reachBottom">
			<u-loadmore :status="loadStatus" />
		</template>
	</view>
</template>

<script>
	import Mixin from "../Mixin";
	import Goods from "./Goods.vue"
	import {
		getGoodsListApi
	} from "./../api_list.js"
	export default {
		name: "SlyWaterfall",
		mixins: [Mixin],
		components: {
			Goods
		},
		data() {
			return {
				page: 0,
				pageSize: 10,
				reachBottom: false,
				loadStatus: 'loadmore', // loading / nomore
		 
			}
		},
		onLoad() {


		},
		created() {


		},

		methods: {
			onReachBottom() {
				if (!this.reachBottom) return
			},
			onNetworkRequest() {
				if (!this.reachBottom) this.reachBottom = true
				if (this.loadStatus === 'loading') return;
				this.loadStatus = 'loading'
				if (this.page < 1) {
					this.page = 0
					this.goodsList = []
				};
				this.page++;
				getGoodsListApi({
					page: this.page,
					limit: this.pageSize
				}).then(res => {
					const {
						page
					} = res;
					this.dataLists = this.dataLists.concat(page.list)
					if (this.page >= page.totalPage) {
						this.loadStatus = 'nomore'
					} else {
						this.loadStatus = 'loadmore'
					}
				}).catch(err => {
					if (this.pageSize > 1) {
						this.pageSize--;
						this.loadStatus = 'loadmore'
					} else {
						this.pageSize = 0;
						this.loadStatus = 'nomore'
					}
				})


			}
		}
	}
</script>
<style lang="scss" scoped>
	.warter-left {
		margin-left: 0 !important;
	}

	.warter-right {
		margin-right: 0 !important;
	}

	.warter-left,
	.warter-right {
		overflow: hidden;

		&:first-child {
			margin-top: 0 !important;
		}
	}
</style>