uniapp 瀑布流布局

已于 2022-04-15 18:38:15 修改
阅读量4.6k 收藏 13
点赞数 3
文章标签： uniapp 瀑布流布局
于 2022-04-15 15:15:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43869822/article/details/124195076
版权

瀑布流组件

<template>
	<view class="waterfall-layout" :style="{ margin: columnGap + 'px' }">
		<view class="water-flow-column" :style="{ 'margin-right': columnGap + 'px' }" v-for="(col, c) in colunmList" :key="c">
			<view class="item" :id="col.id" style="width: 100%;">
				<view
					v-for="(item, index) in col.list"
					:key="index"
					class="item_content"
					:style="{ 'margin-bottom': columnGap + 'px', background: item.background }"
					 @click="choose(item)"
				>
					<view class="water-flow-image"><image mode="widthFix" :lazy-load="true" :src="item.image"  style="width: 100%;"></image></view>
					<view class="water-flow-tietle">{{ item.nftName }} {{ item.creationTime ? '| ' + item.creationTime.substring(0, 4) + '年' : '' }}</view>
					<view class="water-flow-jf">
						<text v-for="(text, i) in item.attributes" :key="i">{{ text.nftName }}：{{ text.value }}{{ i <= 1 ? ' / ' : '' }}</text>
					</view>
					<view class="water-flow-jf water-flow-height">积分：{{ item.value }}</view>
					<view class="exchange-time" v-if="item.exchangeTime">兑换时间：{{ item.exchangeTime }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'grass-water-flow',
	props: {
		fieldKey: {
			//关键比对key
			type: String,
			default: 'id'
		},
		idPrefix: {
			//前缀
			type: String,
			default: 'water-flow-'
		},
		colunmNumber: {
			//瀑布流列数
			type: Number,
			default: 2
		},
		columnGap: {
			//列间隔
			type: Number,
			default: 10
		},
		flowList: {
			// 瀑布流数据
			type: Array,
			required: true,
			default: function() {
				return [];
			}
		},
		value: {
			type: Number,
			default: 0
		},
	},
	data() {
		return {
			colunmList: [], //列
			internalDataList: [], //内部操作数据
			refrenshColunmDataList: [] //记录加载的数据
		};
	},
	watch: {
		colunmNumber: function(v) {
			this.internalDataList = Object.assign([], this.refrenshColunmDataList);
			// this.calculateColumn(v, false);
		},
		flowList: function(v) {
			// console.log(v,"++++++++++")
			this.internalDataList = Object.assign(this.internalDataList, v);
			if (this.internalDataList.length > 0) {
				this.getPushContainer();
			}
		},
		colunmList: {
			
			handler() {
				this.$nextTick(function() {
					this.getPushContainer();
				});
			},
			deep: true
		}
	},
	created() {
		this.internalDataList = Object.assign([], this.flowList);
		this.calculateColumn(this.colunmNumber, true);
	},
	mounted() {
		if (this.internalDataList.length > 0) {
			this.colunmList[0].list.push(this.internalDataList[0]);
			let shiftObj = this.internalDataList.shift();
			this.pushLoadData(shiftObj);
		}
	},
	methods: {
		// 选中点击
		choose(item) {
			uni.$u.route('pages/secondary/product_details',{tokenId:item.tokenId,chainId:item.credential.chainId,contract:item.credential.contractAddress,owner:item.credential.owner});
		},
		/**
		 * 计算列
		 * @param {Object} size       列数
		 * @param {Object} isCreate   是否初始化创建(created生命周期)
		 */
		calculateColumn: function(size, isCreate) {
			this.colunmList = [];
			for (let i = 1; i <= size; i++) {
				let obj = {};
				// console.log(this.idPrefix + i)
				obj.id = this.idPrefix + i;
				obj.list = [];
				this.colunmList.push(obj);
			}
			if (!isCreate) {
				if (this.internalDataList.length > 0) {
					this.colunmList[0].list.push(this.internalDataList[0]);
					let shiftObj = this.internalDataList.shift();
					this.pushLoadData(shiftObj);
				}
			}
		},
		/**
		 * 获取节点信息
		 */
		getPushContainer() {
			let sortList = [];
			const query = uni.createSelectorQuery().in(this);
			query
				.selectAll('.item')
				.boundingClientRect()
				.exec(res => {
					if (res) {
						sortList = res[0];
						sortList.sort(function(a, b) {
							return a.height - b.height;
						});
						this.pushShiftData(sortList[0]);
					}
				});
		},
		/**
		 * 处理数据
		 * @param {Object} pushObj
		 */
		pushShiftData(pushObj) {
			if (this.internalDataList.length > 0) {
				for (let i = 0; i < this.colunmList.length; i++) {
					
					if (this.colunmList[i].id == pushObj.id) {
						this.colunmList[i].list.push(this.internalDataList[0]);
						let shiftObj = this.internalDataList.shift();
						this.pushLoadData(shiftObj);
					}
				}
			}
		},
		/**
		 * 记录加载的数据
		 * @param {Object} obj
		 */
		pushLoadData(obj) {
			if (this.refrenshColunmDataList.length > 0) {
				let result = this.refrenshColunmDataList.some(item => {
					if (item[this.fieldKey] == obj[this.fieldKey]) {
						return true;
					}
				});
				if (!result) {
					this.refrenshColunmDataList.push(obj);
				}
			} else {
				this.refrenshColunmDataList.push(obj);
			}
		},
		/**
		 * 外部刷新数据时，调用此方法，清理掉原有加载数据
		 */
		externalRefrensh() {
			this.refrenshColunmDataList = [];
			for (let i = 0; i < this.colunmList.length; i++) {
				this.colunmList[i].list = [];
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.waterfall-layout {
	display: flex;
	flex-direction: row;
	height: auto;
	.water-flow-column {
		display: flex;
		flex-flow: column wrap;
		width: 100%;
		.water-flow-tietle {
			width: 100%;
			margin: 12rpx auto 0;
			// white-space: nowrap;
			// overflow: hidden;
			// text-overflow: ellipsis;
			font-size: 28rpx;
			line-height: 40rpx;
			// font-weight: 700;
		}
		
		.water-flow-bot {
			width: 90%;
			margin: 0 auto;
			height: 80rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 8rpx;
		}
		
		.water-flow-jf {
			color: #666;
			font-size: 24rpx;
			margin: 8rpx auto 0;
			height: 80rpx;
			line-height: 40rpx;
			overflow: hidden;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
		}
		
		.water-flow-height{
			height: 34rpx;
		}
		
		.exchange-time {
			font-size: 24rpx;
			color: #666666;
			width: 90%;
			margin: 0 auto;
		}
	}
	.water-flow-column:last-child {
		margin-right: 0px !important;
	}
}

</style>

测试页面

<template>
	<view class="app">
		<water-flow-box ref="wfp" @click="choose" :colunmNumber="colunmNumber" :flowList="list" :columnGap="10"></water-flow-box>
	</view>
</template>

<script>
	
	// 模拟 JSON 数据
	const data = require('./data.json');
	export default {
		components: {
			WaterfallFlow
		},
		data() {
			return {
				colunmNumber: 2, //列
				page: 1,
				start: 0,
				end: 0,
				list: [], // 列表
			}
		},
		onLoad() {
			this.getList();
		},
		onReachBottom() {
			this.page++;
			this.getList();
		},
		methods: {
			// 选中
			choose(item) {
				// item 返回选中 JSON 对象
				console.log(item)
			},
			// 模拟加载数据
			getList() {
				if (this.list.length < data.list.length) {
					uni.showLoading({
						title: '加载中...'
					})
					setTimeout(() => {
						//this.$refs.wfp.externalRefrensh(); //清理掉原有加载数据 避免追加
						this.end = this.page * 10; //假数据比较少 , 可以调小一点
						this.list = this.list.concat(data.list.slice(this.start, this.end));
						console.log(this.list,'--------------------')
						this.start = this.end;
						uni.hideLoading();
					}, 1000)
				}
			}
		}
	}
</script>

假数据

新建data.json文件

{
		"list": [{
			"nftId": "55619129",
			"nftName": "红星丈八宣纸",
			"amount": 1,
			"status": "OnSale",
			"tokenId": "0xq9lzzg850wuh3qyqan0e27lag3zkvjth9gkwirne",
			"releaseTotal": "100",
			"artist": {
				"artistId": 1,
				"avatar": "1e000d1c195e0f6831789a05",
				"name": "解勇",
				"signature": "为无声者发声、为弱者代言、让不可见的可见，让不可闻的可闻",
				"introduction": null,
				"status": 1,
				"sort": null
			},
			"creationTime": "2008-03-01 00:00:00",
			"category": {
				"categoryId": 3,
				"parentId": 0,
				"categoryName": "限时抢购",
				"icon": null,
				"pic": "",
				"seq": 3,
				"status": 1,
				"recTime": "2022-03-29 14:01:25",
				"grade": 0,
				"updateTime": "2022-04-06 15:28:08",
				"chainId": null,
				"categories": null
			},
			"credential": {
				"chainId": 1,
				"contractAddress": "0xa88c7fee6ad5b4e6cb953e4ad988dd8b71a4e6e0",
				"contractName": "合约名称547",
				"contractSymbol": "&",
				"contractType": "ERC721",
				"createdAt": "2022-03-07 17:18:53",
				"creator": "0x4293859c2429c5554174d4ea9b336559933847d2",
				"networkName": "SolarChain",
				"owner": "0xa88c7fee6ad5b4e6cb953e4ad988dd8b71a4e6e0"
			},
			"description": "这是这个商品的描述信息，暂时先以这个代替",
			"image": "https://img14.artimg.net/gallery/2021/0414/161840232569823650.jpg",
			"attributes": [{
				"nftKey": "size",
				"nftName": "尺寸",
				"required": 0,
				"status": 1,
				"rule": null,
				"defaultValue": null,
				"remark": null,
				"value": "0.8m*0.8m"
			}, {
				"nftKey": "weight",
				"nftName": "重量",
				"required": 0,
				"status": 1,
				"rule": null,
				"defaultValue": null,
				"remark": null,
				"value": "2.0kg"
			}, {
				"nftKey": "type",
				"nftName": "类型",
				"required": 0,
				"status": 1,
				"rule": null,
				"defaultValue": null,
				"remark": null,
				"value": "油画"
			}],
			"value": null,
			"order": null
		}, {
			"nftId": "64922601",
			"nftName": "童年",
			"amount": 1,
			"status": "OnSale",
			"tokenId": "0x0w3lk1pmrukw4zelxzbn6pjvlxx8pfd8i0ie8d2z",
			"releaseTotal": "100",
			"artist": {
				"artistId": 1,
				"avatar": "1e000d1c195e0f6831789a05",
				"name": "解勇",
				"signature": "为无声者发声、为弱者代言、让不可见的可见，让不可闻的可闻",
				"introduction": null,
				"status": 1,
				"sort": null
			},
			"creationTime": "2008-03-01 00:00:00",
			"category": {
				"categoryId": 7,
				"parentId": 1,
				"categoryName": "舞蹈",
				"icon": null,
				"pic": "",
				"seq": 4,
				"status": 1,
				"recTime": "2022-03-29 14:02:43",
				"grade": 1,
				"updateTime": null,
				"chainId": 65534,
				"categories": null
			},
			"credential": {
				"chainId": 1,
				"contractAddress": "0xa88c7fee6ad5b4e6cb953e4ad988dd8b71a4e6e0",
				"contractName": "合约名称147",
				"contractSymbol": "&",
				"contractType": "ERC721",
				"createdAt": "2022-03-07 17:18:53",
				"creator": "0x4293859c2429c5554174d4ea9b336559933847d2",
				"networkName": "SolarChain",
				"owner": "0xa88c7fee6ad5b4e6cb953e4ad988dd8b71a4e6e0"
			},
			"description": "这是这个商品的描述信息，暂时先以这个代替",
			"image": "https://img14.artimg.net/gallery/2018/1017/153975835918910850.jpg",
			"attributes": [{
				"nftKey": "size",
				"nftName": "尺寸",
				"required": 0,
				"status": 1,
				"rule": null,
				"defaultValue": null,
				"remark": null,
				"value": "0.8m*0.8m"
			}, {
				"nftKey": "weight",
				"nftName": "重量",
				"required": 0,
				"status": 1,
				"rule": null,
				"defaultValue": null,
				"remark": null,
				"value": "2.0kg"
			}, {
				"nftKey": "type",
				"nftName": "类型",
				"required": 0,
				"status": 1,
				"rule": null,
				"defaultValue": null,
				"remark": null,
				"value": "油画"
			}],
			"value": null,
			"order": null
		}, {
			"nftId": "45066878",
			"nftName": "黑色独角兽",
			"amount": 1,
			"status": "OnSale",
			"tokenId": "0x7b02ohd9nulxlihbnq4zzlsgzyo1p0q7abgqyowk",
			"releaseTotal": "100",
			"artist": {
				"artistId": 1,
				"avatar": "1e000d1c195e0f6831789a05",
				"name": "解勇",
				"signature": "为无声者发声、为弱者代言、让不可见的可见，让不可闻的可闻",
				"introduction": null,
				"status": 1,
				"sort": null
			},
			"creationTime": "2008-03-01 00:00:00",
			"category": {
				"categoryId": 3,
				"parentId": 0,
				"categoryName": "限时抢购",
				"icon": null,
				"pic": "",
				"seq": 3,
				"status": 1,
				"recTime": "2022-03-29 14:01:25",
				"grade": 0,
				"updateTime": "2022-04-06 15:28:08",
				"chainId": null,
				"categories": null
			},
			"credential": {
				"chainId": 1,
				"contractAddress": "0xa88c7fee6ad5b4e6cb953e4ad988dd8b71a4e6e0",
				"contractName": "合约名称846",
				"contractSymbol": "&",
				"contractType": "ERC721",
				"createdAt": "2022-03-07 17:18:53",
				"creator": "0x4293859c2429c5554174d4ea9b336559933847d2",
				"networkName": "SolarChain",
				"owner": "0xa88c7fee6ad5b4e6cb953e4ad988dd8b71a4e6e0"
			},
			"description": "这是这个商品的描述信息，暂时先以这个代替",
			"image": "https://img14.artimg.net/gallery/2018/1230/154610204915595730.jpg",
			"attributes": [{
				"nftKey": "size",
				"nftName": "尺寸",
				"required": 0,
				"status": 1,
				"rule": null,
				"defaultValue": null,
				"remark": null,
				"value": "0.8m*0.8m"
			}, {
				"nftKey": "weight",
				"nftName": "重量",
				"required": 0,
				"status": 1,
				"rule": null,
				"defaultValue": null,
				"remark": null,
				"value": "2.0kg"
			}, {
				"nftKey": "type",
				"nftName": "类型",
				"required": 0,
				"status": 1,
				"rule": null,
				"defaultValue": null,
				"remark": null,
				"value": "油画"
			}],
			"value": null,
			"order": null
		}, {
			"nftId": "33980233",
			"nftName": "肖谷油画作品",
			"amount": 1,
			"status": "OnSale",
			"tokenId": "0xlqsf5613feub105svni5ih5mbhvu0hqhbsxss405",
			"releaseTotal": "100",
			"artist": {
				"artistId": 1,
				"avatar": "1e000d1c195e0f6831789a05",
				"name": "解勇",
				"signature": "为无声者发声、为弱者代言、让不可见的可见，让不可闻的可闻",
				"introduction": null,
				"status": 1,
				"sort": null
			},
			"creationTime": "2008-03-01 00:00:00",
			"category": {
				"categoryId": 10,
				"parentId": 2,
				"categoryName": "门票",
				"icon": null,
				"pic": "",
				"seq": 1,
				"status": 1,
				"recTime": "2022-03-29 14:03:26",
				"grade": 1,
				"updateTime": null,
				"chainId": 4,
				"categories": null
			},
			"credential": {
				"chainId": 1,
				"contractAddress": "0xa88c7fee6ad5b4e6cb953e4ad988dd8b71a4e6e0",
				"contractName": "合约名称342",
				"contractSymbol": "&",
				"contractType": "ERC721",
				"createdAt": "2022-03-07 17:18:53",
				"creator": "0x4293859c2429c5554174d4ea9b336559933847d2",
				"networkName": "SolarChain",
				"owner": "0xa88c7fee6ad5b4e6cb953e4ad988dd8b71a4e6e0"
			},
			"description": "这是这个商品的描述信息，暂时先以这个代替",
			"image": "https://img14.artimg.net/gallery/2018/0703/153058989758971630.jpg",
			"attributes": [{
				"nftKey": "size",
				"nftName": "尺寸",
				"required": 0,
				"status": 1,
				"rule": null,
				"defaultValue": null,
				"remark": null,
				"value": "0.8m*0.8m"
			}, {
				"nftKey": "weight",
				"nftName": "重量",
				"required": 0,
				"status": 1,
				"rule": null,
				"defaultValue": null,
				"remark": null,
				"value": "2.0kg"
			}, {
				"nftKey": "type",
				"nftName": "类型",
				"required": 0,
				"status": 1,
				"rule": null,
				"defaultValue": null,
				"remark": null,
				"value": "油画"
			}],
			"value": null,
			"order": null
		}, {
			"nftId": "54419818",
			"nftName": "柔软的鹅卵石",
			"amount": 1,
			"status": "OnSale",
			"tokenId": "0xtjibn2835s9l3r6p275r6edcl95xvu1dmtba5kod",
			"releaseTotal": "100",
			"artist": {
				"artistId": 1,
				"avatar": "1e000d1c195e0f6831789a05",
				"name": "解勇",
				"signature": "为无声者发声、为弱者代言、让不可见的可见，让不可闻的可闻",
				"introduction": null,
				"status": 1,
				"sort": null
			},
			"creationTime": "2008-03-01 00:00:00",
			"category": {
				"categoryId": 10,
				"parentId": 2,
				"categoryName": "门票",
				"icon": null,
				"pic": "",
				"seq": 1,
				"status": 1,
				"recTime": "2022-03-29 14:03:26",
				"grade": 1,
				"updateTime": null,
				"chainId": 4,
				"categories": null
			},
			"credential": {
				"chainId": 1,
				"contractAddress": "0xa88c7fee6ad5b4e6cb953e4ad988dd8b71a4e6e0",
				"contractName": "合约名称550",
				"contractSymbol": "&",
				"contractType": "ERC721",
				"createdAt": "2022-03-07 17:18:53",
				"creator": "0x4293859c2429c5554174d4ea9b336559933847d2",
				"networkName": "SolarChain",
				"owner": "0xa88c7fee6ad5b4e6cb953e4ad988dd8b71a4e6e0"
			},
			"description": "这是这个商品的描述信息，暂时先以这个代替",
			"image": "https://img14.artimg.net/gallery/2018/0401/152257434335637880.jpg",
			"attributes": [{
				"nftKey": "size",
				"nftName": "尺寸",
				"required": 0,
				"status": 1,
				"rule": null,
				"defaultValue": null,
				"remark": null,
				"value": "0.8m*0.8m"
			}, {
				"nftKey": "weight",
				"nftName": "重量",
				"required": 0,
				"status": 1,
				"rule": null,
				"defaultValue": null,
				"remark": null,
				"value": "2.0kg"
			}, {
				"nftKey": "type",
				"nftName": "类型",
				"required": 0,
				"status": 1,
				"rule": null,
				"defaultValue": null,
				"remark": null,
				"value": "油画"
			}],
			"value": null,
			"order": null
		}, {
			"nftId": "48185977",
			"nftName": "单肩手提包",
			"amount": 1,
			"status": "OnSale",
			"tokenId": "0xa0rgd9vi4tu54wivwrxjdj8g1p6l26j1q0742dcy",
			"releaseTotal": "100",
			"artist": {
				"artistId": 1,
				"avatar": "1e000d1c195e0f6831789a05",
				"name": "解勇",
				"signature": "为无声者发声、为弱者代言、让不可见的可见，让不可闻的可闻",
				"introduction": null,
				"status": 1,
				"sort": null
			},
			"creationTime": "2008-03-01 00:00:00",
			"category": {
				"categoryId": 9,
				"parentId": 1,
				"categoryName": "影像",
				"icon": null,
				"pic": "",
				"seq": 6,
				"status": 1,
				"recTime": "2022-03-29 14:03:11",
				"grade": 1,
				"updateTime": "2022-04-06 15:36:39",
				"chainId": 65534,
				"categories": null
			},
			"credential": {
				"chainId": 1,
				"contractAddress": "0xa88c7fee6ad5b4e6cb953e4ad988dd8b71a4e6e0",
				"contractName": "合约名称798",
				"contractSymbol": "&",
				"contractType": "ERC721",
				"createdAt": "2022-03-07 17:18:53",
				"creator": "0x4293859c2429c5554174d4ea9b336559933847d2",
				"networkName": "SolarChain",
				"owner": "0xa88c7fee6ad5b4e6cb953e4ad988dd8b71a4e6e0"
			},
			"description": "这是这个商品的描述信息，暂时先以这个代替",
			"image": "https://img14.artimg.net/gallery/2018/0607/152834040579014530.jpg",
			"attributes": [{
				"nftKey": "size",
				"nftName": "尺寸",
				"required": 0,
				"status": 1,
				"rule": null,
				"defaultValue": null,
				"remark": null,
				"value": "0.8m*0.8m"
			}, {
				"nftKey": "weight",
				"nftName": "重量",
				"required": 0,
				"status": 1,
				"rule": null,
				"defaultValue": null,
				"remark": null,
				"value": "2.0kg"
			}, {
				"nftKey": "type",
				"nftName": "类型",
				"required": 0,
				"status": 1,
				"rule": null,
				"defaultValue": null,
				"remark": null,
				"value": "油画"
			}],
			"value": null,
			"order": null
		}, {
			"nftId": "70720981",
			"nftName": "老寿星",
			"amount": 1,
			"status": "OnSale",
			"tokenId": "0xt1vnbfep7de5chxssjmvjyx8l3njyqjy23g7nit6",
			"releaseTotal": "100",
			"artist": {
				"artistId": 1,
				"avatar": "1e000d1c195e0f6831789a05",
				"name": "解勇",
				"signature": "为无声者发声、为弱者代言、让不可见的可见，让不可闻的可闻",
				"introduction": null,
				"status": 1,
				"sort": null
			},
			"creationTime": "2008-03-01 00:00:00",
			"category": {
				"categoryId": 3,
				"parentId": 0,
				"categoryName": "限时抢购",
				"icon": null,
				"pic": "",
				"seq": 3,
				"status": 1,
				"recTime": "2022-03-29 14:01:25",
				"grade": 0,
				"updateTime": "2022-04-06 15:28:08",
				"chainId": null,
				"categories": null
			},
			"credential": {
				"chainId": 1,
				"contractAddress": "0xa88c7fee6ad5b4e6cb953e4ad988dd8b71a4e6e0",
				"contractName": "合约名称814",
				"contractSymbol": "&",
				"contractType": "ERC721",
				"createdAt": "2022-03-07 17:18:53",
				"creator": "0x4293859c2429c5554174d4ea9b336559933847d2",
				"networkName": "SolarChain",
				"owner": "0xa88c7fee6ad5b4e6cb953e4ad988dd8b71a4e6e0"
			},
			"description": "这是这个商品的描述信息，暂时先以这个代替",
			"image": "https://img14.artimg.net/gallery/2017/1031/150941718408248720.jpg",
			"attributes": [{
				"nftKey": "size",
				"nftName": "尺寸",
				"required": 0,
				"status": 1,
				"rule": null,
				"defaultValue": null,
				"remark": null,
				"value": "0.8m*0.8m"
			}, {
				"nftKey": "weight",
				"nftName": "重量",
				"required": 0,
				"status": 1,
				"rule": null,
				"defaultValue": null,
				"remark": null,
				"value": "2.0kg"
			}, {
				"nftKey": "type",
				"nftName": "类型",
				"required": 0,
				"status": 1,
				"rule": null,
				"defaultValue": null,
				"remark": null,
				"value": "油画"
			}],
			"value": null,
			"order": null
		}, {
			"nftId": "65782991",
			"nftName": "溥仪访日明信片",
			"amount": 1,
			"status": "OnSale",
			"tokenId": "0xbx7xxpxe7g6kqli2us7emlddjwbt9w4q8n1ikahu",
			"releaseTotal": "100",
			"artist": {
				"artistId": 1,
				"avatar": "1e000d1c195e0f6831789a05",
				"name": "解勇",
				"signature": "为无声者发声、为弱者代言、让不可见的可见，让不可闻的可闻",
				"introduction": null,
				"status": 1,
				"sort": null
			},
			"creationTime": "2008-03-01 00:00:00",
			"category": {
				"categoryId": 3,
				"parentId": 0,
				"categoryName": "限时抢购",
				"icon": null,
				"pic": "",
				"seq": 3,
				"status": 1,
				"recTime": "2022-03-29 14:01:25",
				"grade": 0,
				"updateTime": "2022-04-06 15:28:08",
				"chainId": null,
				"categories": null
			},
			"credential": {
				"chainId": 1,
				"contractAddress": "0xa88c7fee6ad5b4e6cb953e4ad988dd8b71a4e6e0",
				"contractName": "合约名称681",
				"contractSymbol": "&",
				"contractType": "ERC721",
				"createdAt": "2022-03-07 17:18:53",
				"creator": "0x4293859c2429c5554174d4ea9b336559933847d2",
				"networkName": "SolarChain",
				"owner": "0xa88c7fee6ad5b4e6cb953e4ad988dd8b71a4e6e0"
			},
			"description": "这是这个商品的描述信息，暂时先以这个代替",
			"image": "https://img14.artimg.net/gallery/2017/1204/151237355171187920.jpg",
			"attributes": [{
				"nftKey": "size",
				"nftName": "尺寸",
				"required": 0,
				"status": 1,
				"rule": null,
				"defaultValue": null,
				"remark": null,
				"value": "0.8m*0.8m"
			}, {
				"nftKey": "weight",
				"nftName": "重量",
				"required": 0,
				"status": 1,
				"rule": null,
				"defaultValue": null,
				"remark": null,
				"value": "2.0kg"
			}, {
				"nftKey": "type",
				"nftName": "类型",
				"required": 0,
				"status": 1,
				"rule": null,
				"defaultValue": null,
				"remark": null,
				"value": "油画"
			}],
			"value": null,
			"order": null
		}, {
			"nftId": "93012702",
			"nftName": "水中藍寶",
			"amount": 1,
			"status": "OnSale",
			"tokenId": "0xi04boc20mt07qsx8fqemijxib78htg835ojxikjt",
			"releaseTotal": "100",
			"artist": {
				"artistId": 1,
				"avatar": "1e000d1c195e0f6831789a05",
				"name": "解勇",
				"signature": "为无声者发声、为弱者代言、让不可见的可见，让不可闻的可闻",
				"introduction": null,
				"status": 1,
				"sort": null
			},
			"creationTime": "2008-03-01 00:00:00",
			"category": {
				"categoryId": 10,
				"parentId": 2,
				"categoryName": "门票",
				"icon": null,
				"pic": "",
				"seq": 1,
				"status": 1,
				"recTime": "2022-03-29 14:03:26",
				"grade": 1,
				"updateTime": null,
				"chainId": 4,
				"categories": null
			},
			"credential": {
				"chainId": 1,
				"contractAddress": "0xa88c7fee6ad5b4e6cb953e4ad988dd8b71a4e6e0",
				"contractName": "合约名称917",
				"contractSymbol": "&",
				"contractType": "ERC721",
				"createdAt": "2022-03-07 17:18:53",
				"creator": "0x4293859c2429c5554174d4ea9b336559933847d2",
				"networkName": "SolarChain",
				"owner": "0xa88c7fee6ad5b4e6cb953e4ad988dd8b71a4e6e0"
			},
			"description": "这是这个商品的描述信息，暂时先以这个代替",
			"image": "https://img14.artimg.net/gallery/2018/0926/153796130397459060.jpg",
			"attributes": [{
				"nftKey": "size",
				"nftName": "尺寸",
				"required": 0,
				"status": 1,
				"rule": null,
				"defaultValue": null,
				"remark": null,
				"value": "0.8m*0.8m"
			}, {
				"nftKey": "weight",
				"nftName": "重量",
				"required": 0,
				"status": 1,
				"rule": null,
				"defaultValue": null,
				"remark": null,
				"value": "2.0kg"
			}, {
				"nftKey": "type",
				"nftName": "类型",
				"required": 0,
				"status": 1,
				"rule": null,
				"defaultValue": null,
				"remark": null,
				"value": "油画"
			}],
			"value": null,
			"order": null
		}, {
			"nftId": "17291381",
			"nftName": "吉祥鹿",
			"amount": 1,
			"status": "OnSale",
			"tokenId": "0x86kctp776cj1ya3jutevvetzir4pdxkxgyqrnyg5",
			"releaseTotal": "100",
			"artist": {
				"artistId": 1,
				"avatar": "1e000d1c195e0f6831789a05",
				"name": "解勇",
				"signature": "为无声者发声、为弱者代言、让不可见的可见，让不可闻的可闻",
				"introduction": null,
				"status": 1,
				"sort": null
			},
			"creationTime": "2008-03-01 00:00:00",
			"category": {
				"categoryId": 10,
				"parentId": 2,
				"categoryName": "门票",
				"icon": null,
				"pic": "",
				"seq": 1,
				"status": 1,
				"recTime": "2022-03-29 14:03:26",
				"grade": 1,
				"updateTime": null,
				"chainId": 4,
				"categories": null
			},
			"credential": {
				"chainId": 1,
				"contractAddress": "0xa88c7fee6ad5b4e6cb953e4ad988dd8b71a4e6e0",
				"contractName": "合约名称883",
				"contractSymbol": "&",
				"contractType": "ERC721",
				"createdAt": "2022-03-07 17:18:53",
				"creator": "0x4293859c2429c5554174d4ea9b336559933847d2",
				"networkName": "SolarChain",
				"owner": "0xa88c7fee6ad5b4e6cb953e4ad988dd8b71a4e6e0"
			},
			"description": "这是这个商品的描述信息，暂时先以这个代替",
			"image": "https://img14.artimg.net/gallery/2019/0210/154977092439971500.jpg",
			"attributes": [{
				"nftKey": "size",
				"nftName": "尺寸",
				"required": 0,
				"status": 1,
				"rule": null,
				"defaultValue": null,
				"remark": null,
				"value": "0.8m*0.8m"
			}, {
				"nftKey": "weight",
				"nftName": "重量",
				"required": 0,
				"status": 1,
				"rule": null,
				"defaultValue": null,
				"remark": null,
				"value": "2.0kg"
			}, {
				"nftKey": "type",
				"nftName": "类型",
				"required": 0,
				"status": 1,
				"rule": null,
				"defaultValue": null,
				"remark": null,
				"value": "油画"
			}],
			"value": null,
			"order": null
		}],
		"total": 25,
		"size": 10,
		"current": 1,
		"searchCount": true,
		"pages": 3
	}
织_网
关注
  • 3
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 10
    评论
uniapp瀑布流组件
sinat_42501006的博客
03-01 1738
组件components <template> <view> <view class="flow-box" :style="'height: ' + loadingTop + 'rpx'" ref="flow_box"> <!-- <empty v-if="newList.length === 0"></empty> --> <empty v-show="isShowEmpty"></empty&
纵向瀑布流布局（双列）
07-23
纵向瀑布流布局（双列）
前端uniapp封装商城瀑布流，复制即可用
weixin_70610368的博客
12-08 908
1.二次封装的vue瀑布流组件。3.在页面使用二次封装瀑布流。
前端uni-app篇之在uni-app中实现图片瀑布流布局并进行性能优化
星辰迷上大海的博客
07-03 1125
在 uni-app 中实现图片瀑布流布局，为了优化性能，可以使用图片懒加载技术，即在滚动时才加载可视区域内的图片，避免一次性加载过多的图片导致页面卡顿。此外，还可以对图片进行压缩和缓存处理，减小图片的大小和数量，提高页面加载速度和用户体验。
uniapp瀑布流布局写法
A12536365214的博客
09-19 2101
属性为 "widthFix" 时，图片的宽度将会被拉伸或缩小以适应容器的宽度，同时保持图片的原始宽高比例。瀑布流布局（Waterfall Flow Layout），也称为瀑布流式布局，是一种常见的网页或移动应用布局方式，特点是元素以不规则的方式排列，就像瀑布中的流水一样，每个元素的高度可以不同。不规则的排列：瀑布流布局允许元素以不同的高度和宽度排列，因此适用于展示不同尺寸和形状的内容，如图片、卡片、商品等。动态加载：可以通过滚动加载或异步加载来动态添加新的元素，以实现无限滚动效果，提高用户体验。
vue+uniapp瀑布流布局多种实现方式
热门推荐
pixle的博客
01-08 1万+
瀑布流布局是网页设计常见的一种布局，一般用于图片多列展示。列宽固定，图片根据自身高度自适应交错排列。
uniapp实现瀑布流
zzx262625的博客
10-28 2317
width: 90%;然后看看效果；希望对你有所帮助；如有需要酌情修改。
uniapp写瀑布流
weixin_42600407的博客
02-09 387
UniApp 是一款支持多端开发的框架，您可以使用它来实现瀑布流布局。 实现瀑布流的方法有很多，其中一种是使用 CSS Flexbox 布局。您可以将父容器的 display 设置为 flex，然后通过 flex-wrap 属性设置内部元素的换行方式。您还可以通过 align-content 属性设置元素在父容器内的对齐方式。 如果您不熟悉 CSS Flexbox 布局，可以参考一些教程或者文档，...
uniapp微信小程序瀑布流布局
weixin_59191637的博客
11-10 985
uniapp微信小程序瀑布流布局
uniapp瀑布流实现
weixin_44912745的博客
01-27 1427
uniapp瀑布流实现
uniapp 电商app 瀑布流布局实现
yehaocheng520的博客
11-05 5457
瀑布流布局 如上的布局就是瀑布流布局。 由于图片的大小不一致，商品的格式错乱，形成的独特布局。 如果想要实现这种布局，可以通过两种方式来实现： 瀑布流布局实现方式一：column-count的方式 column-count的方式实现瀑布流布局：https://www.jq22.com/webqd4677 主要用到的参数： column-count column-gap column-width 几个参数； column-count:瀑布流的列数 column-gap: 相邻瀑布流之间的间距 colum
伪瀑布流_uniapp瀑布流_uniapp瀑布流_插件_
10-04
标签“uniapp瀑布流”和“uniapp瀑布流 插件”进一步明确了这个资源与`uni-app`中的瀑布流布局实现有关，且可能是一个社区或开发者共享的插件，方便其他开发者在自己的项目中直接使用。 在提供的压缩包子文件`pages...
uniapp vue瀑布流自定义控件资源包
06-12
【uniapp vue瀑布流自定义控件资源包】是一个针对Vue.js框架的uniapp插件，主要用于实现瀑布流布局，这种布局方式常用于展示图片或商品列表，具有良好的视觉效果和用户体验。瀑布流布局的特点是每一列的高度不固定，...
uniapp瀑布流实现（商品/图片瀑布流）
04-15
本篇文章将深入探讨如何在uniapp中实现瀑布流布局，特别是在展示商品或图片时的应用。 瀑布流布局，也称为Pinterest布局，是一种常见的网页设计模式，其特点是内容以多列的形式垂直排列，每列的高度根据内容自适应...
瀑布流布局微信小程序
10-20
微信小程序源码，前端源码，简单展示源码，原生小程序源码 非uniapp，仅供参考，如有涉及版权问题请联系作者。微信小程序源码，前端源码，简单展示源码，原生小程序源码 非uniapp，仅供参考，如有涉及版权问题请联系...
[毕业设计]VB环境下电脑销售与财务管理系统开发(ACCESS+源代码+论文).zip
08-05
[毕业设计]VB环境下电脑销售与财务管理系统开发(ACCESS+源代码+论文)
PPO（Proximal Policy Optimization，近端策略优化）算法
最新发布
08-05
在解答2024年华数杯全国大学生数学建模竞赛的C题“老外游中国”时，虽然PPO（Proximal Policy Optimization，近端策略优化）算法主要是应用于强化学习领域，特别是在解决连续动作空间的策略优化问题上，但在此数学建模竞赛中，它并不直接适用于数据处理、综合评价或路径规划等任务。不过，我们可以从数据处理和决策优化的角度，类比强化学习中的一些思想来构思解题策略。 然而，对于本题而言，我们可以更侧重于数据分析、综合评价模型（如层次分析法AHP、TOPSIS、模糊综合评价等）和路径规划算法（如Dijkstra、A*、遗传算法等）来解决问题。以下是对各个问题的进一步建模思路： 一、问题1建模思路 1.1 数据处理与分析 数据收集与清洗：首先，需要加载所有352个城市的CSV文件，对每个城市的100个景点信息进行数据清洗，去除无效或缺失的关键信息（如评分缺失的景点）。 最高分查找：遍历所有景点，找到最高评分（BS），并统计获评该评分的景点数量。 城市排名：统计每个城市获评BS的景点数量，并根据数量多少进行排序，列出前10个城市。 二、问题2建模思路 2.1 综合评价体系构建
中国城市统计年鉴（1985-2023）
08-05
《中国城市统计年鉴》是全面反映中国城市社会经济发展情况的资料性年刊。《中国城市统计年鉴—2023》收录了2022年全国各级城市社会经济发展等方面的主要统计数据。 本年鉴内容共分四个部分: 第一部分是全国城市行政区划,列有不同区域、不同级别的城市分布情况; 第二、三部分分别是地级以上城市统计资料和县级城市统计资料,具体包括人口、资源环境、经济发展、科技创新、人民生活、公共服务、等方面的数据; 第四部分是附录,为主要统计指标解释。 需要说明的是,从1997年开始,地级以上城市和县级城市分别采用不同的统计制度,有些指标在两类城市之间不具有可比性,故本年鉴将地级以上城市和县级城市统计资料分为独立的两部分。本年鉴所涉及的全国或全部城市统计资料,均未包括香港特别行政区、澳门特别行政区和台湾省。
uniapp实现列表瀑布流
05-31
要在Uniapp中实现瀑布流列表，你可以使用uni-list组件并设置为waterfall模式。以下是示例代码： ``` html <template> <view> <uni-list :waterfall="true"> <uni-list-item v-for="(item, index) in list" :key="index" :thumb="item.thumb" :title="item.title"></uni-list-item> </uni-list> </view> </template> <script> export default { data() { return { list: [ { title: 'Item 1', thumb: 'https://picsum.photos/id/1/200/200' }, { title: 'Item 2', thumb: 'https://picsum.photos/id/2/200/200' }, { title: 'Item 3', thumb: 'https://picsum.photos/id/3/200/200' }, { title: 'Item 4', thumb: 'https://picsum.photos/id/4/200/200' }, { title: 'Item 5', thumb: 'https://picsum.photos/id/5/200/200' }, { title: 'Item 6', thumb: 'https://picsum.photos/id/6/200/200' }, { title: 'Item 7', thumb: 'https://picsum.photos/id/7/200/200' }, { title: 'Item 8', thumb: 'https://picsum.photos/id/8/200/200' }, { title: 'Item 9', thumb: 'https://picsum.photos/id/9/200/200' }, { title: 'Item 10', thumb: 'https://picsum.photos/id/10/200/200' } ] } } } </script> ``` 在上面的代码中，我们使用了uni-list组件，并将其设置为waterfall模式。然后，我们通过v-for指令将列表项渲染到页面上。每个列表项都由uni-list-item组件表示，并且我们设置了标题和缩略图。这样，我们就可以在Uniapp中实现瀑布流列表了。
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

织_网

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值