uniapp 瀑布流布局

uniapp 瀑布流布局瀑布流组件<template> <viewclass=”waterfall-layout”:style=”{margin:columnGap+’px’}”> <viewclass=”water-flow-column”:style=”{‘margin-right’:columnGap+’px’}”v-for=”(col,c)incolunmList”:key=”c”> <viewclass=”item”:id=

瀑布流组件

<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
	}

今天的文章uniapp 瀑布流布局分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/12599.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注