博客

<!-- 瀑布流 -->
					<div class="waterfall-content">
						<waterfallsFlow :list="list" :cols="cols" :single="single" @wapper-lick="preview()">
							<!-- <template v-slot:default="item"> -->
							<!-- 此处添加插槽内容 -->
							<!-- <view class="cnt">
			          <view class="title">{{item.title}}</view>
			          <view class="text">{{item.text}}</view>
			        </view> -->
							<!-- </template> -->
						</waterfallsFlow>
					</div>

script 部分：

在data中： list是请求的后端接口

single: true,
cols: 5,
//这个list数组的格式一定要注意
list: [
        {
			id:1,
			image_url:'../../../static/details.png'
		}
	  ],

请求：

// 请求列表
const _this = this //不然this.拿不到
					uni.request({
						url: '****',  
						method: 'GET', //请求方式  或GET，必须为大写
						data: {
							type: _this.type,
							search:_this.searchvalue
						},
						success: (res) => {
							console.log("搜索=>", res.data.data);
							_this.searchshuzu = res.data.data
							var photosearch =[]
							_this.searchshuzu.map((item, index) => {
							  photosearch.push(
                                //重新加属性建数组，符合组件的要求
							    Object.assign( {id:item.id},{ image_url: item.image} )
							  ) 
							})
							console.log(photosearch)
							_this.list = photosearch
							console.log(_this.list)
						}
					});

这样就成咯