uniapp 土法瀑布流 - vue3-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp 土法瀑布流 - vue3。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果图

uniapp 土法瀑布流 - vue3,uniapp,Web前端,uni-app,前端,javascript,瀑布流

代码文章来源地址https://www.toymoban.com/news/detail-580461.html

<template>
	<view>
		
		<!-- 瀑布流展示 -->
		
		
		
		<!-- 标签页 -->
		<view class="rowStart flexNoLineBreaking paddingCol10 innerDomPaddingRow5 tinyShadow marginBottom10">
			<view @click="tabsCurrent = 0; run_waterfall_task()" :class="{'colorRed': tabsCurrent == 0}">
				全部
			</view>
			<view @click="tabsCurrent = 1; run_waterfall_task()" :class="{'colorRed': tabsCurrent == 1}">
				配送中
			</view>
			<view @click="tabsCurrent = 2; run_waterfall_task()" :class="{'colorRed': tabsCurrent == 2}">
				已完成
			</view>
		</view>
		
		
		
		
		<!-- swiper -->
		<view>
			<swiper :indicator-dots="false" :autoplay="false" :current="tabsCurrent" style="height: 80vh;" @change="changedSwiper">
				
				<!-- 全部 -->
				<swiper-item>
					<view class="oneDom-0">
						
						<view class="box rowSpaceBetween">
							<!-- 左边 -->
							<view class="width48pct">
								
								<view class="wf-0-0">
									
									<!-- 遍历当前列 -->
									<view v-for="(item, index) in waterfall[0].result[0]" :key="'wf-0-0-'+index">
										<image :src="item.src" mode="widthFix" class="width100pct radius10"></image>
									</view>
									
								</view>
								
							</view>
							
							<!-- 右边 -->
							<view class="width48pct">
								
								<view class="wf-0-1">
									
									<!-- 遍历当前列 -->
									<view v-for="(item, index) in waterfall[0].result[1]" :key="'wf-0-1-'+index">
										<image :src="item.src" mode="widthFix" class="width100pct radius10"></image>
									</view>
								
								</view>
								
							</view>
						</view>
						
					</view>
				</swiper-item>
				
				<!-- 配送中 -->
				<swiper-item>
					<view class="oneDom-1">
						
						<view class="box rowSpaceBetween">
							<!-- 左边 -->
							<view class="width48pct">
								
								<view class="wf-1-0">
									
									<!-- 遍历当前列 -->
									<view v-for="(item, index) in waterfall[1].result[0]" :key="'wf-1-0-'+index">
										<image :s

到了这里，关于uniapp 土法瀑布流 - vue3的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！